3 ms·

* I looked into those, but wow wow wee wow are they complex. I'll be working with cloning/moving DIVs instead, especially because HTML5 isn't supported everywhe

* I looked into those, but wow wow wee wow are they complex. I'll be working with cloning/moving DIVs instead, especially because HTML5 isn't supported everywhere. * I prefer to avoid libraries when possible, especially when diametrically opposed ones are in use (I'm making an Angular app, JQuery doesn't always play nice). * Thank you for the tip about http://cdnjs.com/ http://cdnjs.com/, I'll be using it in the future. * Hacker News is news, but it's also about discussion. That and I've personally never heard of how bad HTML5 DnD was, I thought the community might benefit from looking into it too.

brianbarker 12y ago
Since when do Angular and JQuery not play nicely? Angular uses "JQLite" which gets replaced with JQuery if it's already loaded. I guess if you're trying direct dom manipulation on the same elements from outside of Angular with JQuery and with Angular it could get messy. The community would just say "you're not doing it the Angular way." You're not. You can use the JQuery inside a directive and controller and be fine. https://docs.angularjs.org/misc/faq https://docs.angularjs.org/misc/faq
- striking 12y ago
  Right, that's what I meant. Sorry about my phrasing.
- ascotan 12y ago
  jquery and angular do not play nicely not matter what the angular people say. Any non-trivial jquery plugin included into a angularjs page will require $timeout(0) hacks to get it to behave properly.
  - brianbarker 12y ago
    But again, is your plugin being called from an angular module, or are you running them separately on the same nodes? That's typically the problem, and it makes sense. If any two frameworks are messing with the same page content, you're bound to see issues. Edit: see comment above as well about JQuery plugins.
- Macha 12y ago
  Ok, to give a specific example: We use drag and drop for sorting in a few places. Our initial implementation was to wrap jQuery UI Sortable in a directive. This worked to an extent, but for our purpose, we ended up having to read the DOM and update the Angular scope from the DOM after jqUI emitted its event. This logic ended up being somewhat clunky. We rewrote our directive in terms of HTML5 drag and drop such that when a user drops something, we get an event on the Angular scope, saying which element was dragged, and which element it was dropped on and then our controller rearranges the array in the scope, and only then is the DOM modified by Angular. This generally isn't possible with jqUI and its plugins, which modify the DOM first and tell you about it later (in such unhelpful low level terms as "moved 100px up" rather than "moved two elements forward").
  - brianbarker 12y ago
    Yeah I can see how that would be a problem. Maybe it'd be better to clarify that JQuery and Angular work great together; however, JQuery plugins (which may have all kinds of selectors, state, DOM manipulation) cannot be guaranteed to do what you want inside of Angular.
dm2 12y ago
All of the events are needed because developers need that granular control. If you want simple, you're going to have to use a library, what you're basically asking for is for the HTML5 spec to emulate jQuery and cut out the options that you specifically don't need, which isn't reasonable. http://www.html5tuts.co.uk/demos/drag/ http://www.html5tuts.co.uk/demos/drag/ Here is a very cool dragging demo using jQuery: http://threedubmedia.com/demo/drag/ http://threedubmedia.com/demo/drag/ If you have a solution to the HTML5 spec to simplify it then please write an article and we'll support it if it's reasonable and do our best to get it added to the spec (it won't be implemented into browsers for a few years though). Remember you have to support lots of use-cases, touchscreens, old browser support (unfortunate reality). The only real complaint in the original linked-to article is about having too many events (they're not all required to be used), then it says that you have to add some CSS for it to work properly in Safari (sounds like Safari's problem, not the HTML5 spec's fault).

brianbarker 12y ago

Since when do Angular and JQuery not play nicely? Angular uses "JQLite" which gets replaced with JQuery if it's already loaded. I guess if you're trying direct dom manipulation on the same elements from outside of Angular with JQuery and with Angular it could get messy. The community would just say "you're not doing it the Angular way." You're not. You can use the JQuery inside a directive and controller and be fine. https://docs.angularjs.org/misc/faq https://docs.angularjs.org/misc/faq

striking 12y ago
Right, that's what I meant. Sorry about my phrasing.
ascotan 12y ago
jquery and angular do not play nicely not matter what the angular people say. Any non-trivial jquery plugin included into a angularjs page will require $timeout(0) hacks to get it to behave properly.
- brianbarker 12y ago
  But again, is your plugin being called from an angular module, or are you running them separately on the same nodes? That's typically the problem, and it makes sense. If any two frameworks are messing with the same page content, you're bound to see issues. Edit: see comment above as well about JQuery plugins.
Macha 12y ago
Ok, to give a specific example: We use drag and drop for sorting in a few places. Our initial implementation was to wrap jQuery UI Sortable in a directive. This worked to an extent, but for our purpose, we ended up having to read the DOM and update the Angular scope from the DOM after jqUI emitted its event. This logic ended up being somewhat clunky. We rewrote our directive in terms of HTML5 drag and drop such that when a user drops something, we get an event on the Angular scope, saying which element was dragged, and which element it was dropped on and then our controller rearranges the array in the scope, and only then is the DOM modified by Angular. This generally isn't possible with jqUI and its plugins, which modify the DOM first and tell you about it later (in such unhelpful low level terms as "moved 100px up" rather than "moved two elements forward").
- brianbarker 12y ago
  Yeah I can see how that would be a problem. Maybe it'd be better to clarify that JQuery and Angular work great together; however, JQuery plugins (which may have all kinds of selectors, state, DOM manipulation) cannot be guaranteed to do what you want inside of Angular.

dm2 12y ago

All of the events are needed because developers need that granular control. If you want simple, you're going to have to use a library, what you're basically asking for is for the HTML5 spec to emulate jQuery and cut out the options that you specifically don't need, which isn't reasonable. http://www.html5tuts.co.uk/demos/drag/ http://www.html5tuts.co.uk/demos/drag/ Here is a very cool dragging demo using jQuery: http://threedubmedia.com/demo/drag/ http://threedubmedia.com/demo/drag/ If you have a solution to the HTML5 spec to simplify it then please write an article and we'll support it if it's reasonable and do our best to get it added to the spec (it won't be implemented into browsers for a few years though). Remember you have to support lots of use-cases, touchscreens, old browser support (unfortunate reality). The only real complaint in the original linked-to article is about having too many events (they're not all required to be used), then it says that you have to add some CSS for it to work properly in Safari (sounds like Safari's problem, not the HTML5 spec's fault).