4 ms·

@striking: Does this work for you? http://www.html5rocks.com/en/tutorials/dnd/basics/ http://www.html5rocks.com/en/tutorials/dnd/basics/ http://html5demos.com

by dm2 12y ago

@striking: Does this work for you? http://www.html5rocks.com/en/tutorials/dnd/basics/ http://www.html5rocks.com/en/tutorials/dnd/basics/ http://html5demos.com/drag http://html5demos.com/drag I don't understand why this is an issue, there are tons of great tutorials: https://www.google.com/search?q=HTML5+drag-and-drop https://www.google.com/search?q=HTML5+drag-and-drop Step 1 to being a web developer, search Google first. More than likely anything you need done has been done 10,000 times and there are at least 100 tutorials. Don't be afraid to use libraries such as jQuery,which HTML5 drag-and-drop doesn't require, but I see that you mentioned avoiding it in another comment. Libraries many times also have the advantage of increasing browser support transparently, which is generally a good thing. Worried about loading time with libraries? Use a CDN such as http://cdnjs.com/ http://cdnjs.com/, most users will have the popular ones already cached in their browser. Use StackOverflow if you have questions, that's what it's there for. Hacker News is for... news.

sfvisser 12y ago
> I don't understand why this is an issue, there are tons of great tutorials: ... > Don't be afraid to use libraries such as jQuery, ... So, bad specs are not an issue because there are tutorials explaining how to use them and there are slightly better abstractions on top of them?
deleted 12y ago
[deleted]
striking 12y ago
* 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").

by dm2 12y ago

sfvisser 12y ago

> I don't understand why this is an issue, there are tons of great tutorials: ... > Don't be afraid to use libraries such as jQuery, ... So, bad specs are not an issue because there are tutorials explaining how to use them and there are slightly better abstractions on top of them?

deleted 12y ago

[deleted]

striking 12y ago

* 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").