How to style dragged element

Question

There are some events that I can use for handling drag & drop:

https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

there is a drag event, which is fired during the time the element is being dragged. I can control the source element styling or the target droppable container, but how can I style the "ghost" element that's being created by the browser?

I want to remove the "disabled" icon from it when the element is over a non-draggable area and replace it with a "cursor-move" icon

Here's what I have so far:

http://jsfiddle.net/YkaCM/

Answer 1

You can't style this directly as it is a bitmap/copy of what the element looked like when the drag started:

http://jsfiddle.net/2EvGP/

EDIT:

You can actually cheat to achieve this by briefly changing the style of the element when the drag starts: http://jsfiddle.net/LULbV/

$('#draggable').bind('dragstart', function (e){

  [Set style here]

  setTimeout(function(){
    [Reset style here]
  }, 1);

  ...

});

This works flawlessly in Chrome 19, and shows the style change depending on how you drag in Firefox 13. You would need to reset the dragged element's style on drop.

(Note I have a pretty fast computer, so I'm not sure if this hack would still work on slow machines)

Answer 2

An alternative, using only CSS, is to style the :active pseudo-class of the element to the desired drag style. The dragged copy will be created based on this state.

However, the original element will be kept with this style, as the browser seems to keep it :active until drop. To avoid this we can assign the style in an animation that runs for a very short period of time. Enough for the browser to copy the style but not too short. 0.1s seems enough for Chrome, Safari and Firefox.

https://jsfiddle.net/mLsw5ajr/

$('#draggable').bind('dragstart', function(e) {

  // http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html
  var stuff = $(this).clone().wrap('<div></div>').parent().html();

  e.originalEvent.dataTransfer.effectAllowed = 'copy';
  e.originalEvent.dataTransfer.setData('stuff', stuff);
});

$('#draggable').bind('drag', function(e) {
  // here I want to style the ghost element, not the source...    
});

$('#droppable').bind('dragover', function(e) {

  if (e.originalEvent.preventDefault)
    e.preventDefault();

  e.originalEvent.dataTransfer.dropEffect = 'copy';
  return false;
});


$('#droppable').bind('dragenter', function(e) {
  $(this).addClass('over');
});

$('#droppable').bind('dragleave', function(e) {
  $(this).removeClass('over');
});


$('#droppable').bind('drop', function(e) {

  if (e.originalEvent.stopPropagation)
    e.originalEvent.stopPropagation();

  var stuff = $(e.originalEvent.dataTransfer.getData('stuff'));
  stuff.appendTo(this);
  return false;
});

#draggable,
#droppable {
  background: #ccc;
  color: #fff;
  padding: 10px;
  margin: 10px 0 100px;
}

#draggable:active {
  animation: drag_style .1s;
}

#droppable.over {
  background: #000;
}

@keyframes drag_style {
  0% {
    background-color: #fc0;
    color: #000;
  }
  99% {
    background-color: #fc0;
    color: #000;
  }
  100% {
    background-color: #ccc;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" draggable="true">
  <p>Drag me to my target</p>
</div>

<div id="droppable">
  <p>Drop me</p>
</div>

A problem I found in Firefox is that the element is kept :active if there is no event triggering by another element (like a drop). To fix this we could trigger a click outside the element.