Question

I’m currently experimenting with HTML5 Drag and Drop API. Now I’ve got several questions:

1.
Am I right, that it’s not possible to connect draggable elements with drop-areas?

Example: You have 2 different kinds of elements you want to be able to drag and drop: Files and Text-Labels. Now if I give some div an DragOver-Handler and a Drop-Handler it will respond to both, files and text-labels. I’m looking for a simple possibility to only respond to a specific type of draggable items.

A connected problem is the dropEffect cursor-style: At the moment I enable all possible drop-targets in the DragStart-Handler and disable all of them in the DragEnd-Handler (with “disable” I mean, that I remove all DragOver- and Drop-Handlers). If I wouldn’t do so, it’ll look like if you could drop a file on an element that should only react to text-labels.

2.
The dropEffect cursor-style is a mess. In Firefox I don’t get them at all, in Chrome it will give me a big “plus”-icon (even if I have removed the DragOver- and Drop-Handlers from an element)

3.
Last feature I am looking for is multi-select: Select multiple Text-Labels and then drag all of them at a time. Is this possible? My first idea was to create a new div and move all selected elements inside this div and then drag the newly created div. Seems pretty hackish and looks quite ugly 😉

I hope you guys have some answers for me. Thanks!

Answer 1

I don’t think that HTML5 drag and drop (and friends) are supposed to be replacements for commonly used “drag and drop” Javascript libraries (although it COULD be used instead of them in some cases). The name is misleading.

Modern operating systems include APIs that allow cross-application communication: clipboard and drag-and-drop. Both APIs are quite similar and need to be quite low-level because of specific challenges:

• the data must be sent across processes, so it must be somehow serialized,
• the sender must have a way way of offering the data in many formats (eg. text/plain and text/html) and the receiver the ability to pick one that it likes best,
• the sender and receiver may live in different processes, so they can never find out about each other (they might even be entities coming from different platforms, GUI frameworks, programming languages etc.), the only channel of communication is the data itself,

Current HTML5 APIS, as opposed to – say – JQueryUI draggables – are not meant to give programmer strict control of the look and feel of the dragging process, but rather enable tight integration with the native, system-wide mechanisms. Which may or may not be what the programmer needs.

So to answer the questions:

1. you cannot “connect draggable elements with drop-areas”, because your draggable elements can even come from outside the browser. But you can make an area that rejects certain types of data (which is what user expects from native drag and drop).
2. “div” and “multiselect” are not things that operating system understands (we don’t have native multi-cliboards or multiple-text-selections). You CAN implement such functionality if you make a with inner divs that can be toggled (eg. by clicking while holding shift). When someone tries to drag the outer dive, make a transfer object that says which inner divs were selected (you could even create an image that shows them).

If the above solutions sound a bit low-level, well – that’s because they are. When you develop a desktop game or tool, you do not rely on native drag and drop for moving pieces across the chessboard or moving sliders in the GUI. I think it will be the same with JavaScript. JQueryUI Draggables are not going anywhere.