Controlling The Appearance of The HTML5 Drag and Drop Effect

Controlling the appearance of the HTML5 drag and drop effect

I think .setDragImage(element, x, y); might be what you are looking for.

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://...';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, x, y);
}

this.addEventListener('dragstart', handleDragStart, false);

Example here: jsfiddle.net/cnAHv/

HTML5 Drag and Drop with multiple different drop targets, dropEffect, multiselect, etc

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.

Why does this CSS style interfere with HTML5 drag and drop? (position: absolute; left: -10000px)

I never found the exact reason those CSS styles mess up HTML5 drag and drop (my guess is the browsers were trying to construct a very large drag and drop image that included the 'offscreen' elements).

However, I have found two work-arounds (the CSS styles were attached to automatically created sub-nodes of the element I wanted to drag and drop):

• Remove the dom nodes with offending CSS styles
• Add display:none styles to the dom nodes with offending CSS styles

Both work-arounds restore expected HTML5 drag and drop behavior; I have not noticed any unwanted side effects, yet.

---

update:
Setting the z-index to a large negative value seems to be a better work-around:

.dijitOffScreen { 
    top: 0;
    left: 0;
    z-index: -9999;
}

---

Related Topics