Preserve the appearance of a draggable item when using the html5 draggable attribute

Question

How can I keep the appearance of dragged element A using the 'draggable' html5 attribute. In some browsers (Safari and Chrome), when dragging a binding, the draggable helper is replaced by the built-in browser implementation of the dragged item, as shown in the screenshots:

When dragging a div

When dragging A

HTML

<div class="draggable">Draggable DIV</div> <a href="" class="draggable">Draggable A</a> 

CSS

 $('.draggable').attr('draggable', true); 

Here is a quick JSBin I put together to demonstrate this issue http://jsbin.com/pihayeceza/1/edit

thanks

Answer 1

I can save the appearance of the draggable item using DataTransfer.setDragImage . If I add the following code in JavaScript to my jsbin instance, it works for me in Firefox, Chrome and Safari:

 $('a.draggable').on('dragstart', function (ev) { var dt = ev.originalEvent.dataTransfer; // In IE browsers, setDragImage does not exist. However, the issue we are // trying to fix does not happen in these broswers. So if setDragImage is not // available, then just don't do anything. if (dt.setDragImage) dt.setDragImage(ev.target, 0, 0); }); 

In the event dataTransfer field, there is a dataTransfer object associated with the drag and drop operation. You should extract it from the original DOM event, and not from the jQuery Event shell, so ev.originalEvent.dataTransfer .

For IE setDragImage there is no setDragImage , but the issue in question is not encountered in the first place, so if setDragImage missing, we just don't call it.

A bin with updated code.

Answer 2

This problem occurs because the default behavior of a drag and drop link with the href attribute is to create an image containing the URL that will be used as the drag and drop location. However, you can fix this by removing the href attribute to get around this without having to remove the href attribute, which you can use the mousedown / up event handlers to remove the attribute, and then re-add it, leaving clickable * bindings.

 $('.draggable').attr('draggable', true).on('mousedown', function () { if ($(this).is('a')) { $(this).data('href', this.href); $(this).removeAttr('href'); } }).on('mouseup', function () { if ($(this).is('a')) { $(this).attr('href', $(this).data('href')); } }).on('click', function () { console.log(this.href); }); 

 .draggable { margin: 10px; display: block; width: 200px; background: #fafafa; color: #333; text-decoration: none; height: 40px; border: 1px solid #eaeaea; line-height: 40px; text-align: center; cursor: move; border-radius: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="draggable">Draggable DIV</div> <a href="http://www.google.com" target="_blank" class="draggable">Draggable A</a> 

* Note. Fragments of the stack do not allow you to follow the link.

Answer 3

Wrap your anchor tags with a div and set draggable = "false" to the anchor tag.

 <div class="draggable"> <a href="" draggable="false">Draggable A</a> </div> 

You will need an additional style so that the button / link does not appear blue and underlined.

 .draggable a { color: inherit; text-decoration: inherit; } 

changed your jsbin here http://jsbin.com/rebayif/edit