Hacker News Reader

Comment by dm2 | Hacker News Reader

@striking: Does this work for you?

http://www.html5rocks.com/en/tutorials/dnd/basics/

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

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/, 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.

View on HN

> 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?

* 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/, 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.

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

Right, that's what I meant. Sorry about my phrasing.

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.

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.

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

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.

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/

Here is a very cool dragging demo using jQuery: 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).

Reply on news.ycombinator.com