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

Not too sure about other browsers however the dataTransfer object contains a property called mozCursor. This allows you to change the cursor in the drag state, however this is a Mozilla property.

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/mozCursor

An example of using this can be found at the following location, the setting is changed on dragstart (set to use default ‘arrow’ cursor), dragover (set to use auto drag cursor (arrow with copy)) and dragleave (reset to use default ‘arrow’ cursor):

http://jsfiddle.net/YkaCM/4/

---

Try the answers to:
Javascript: How can I set the cursor during a drag & drop operation on a website?

---

Updated your dragover with the following:

$('#droppable').bind('dragover', function (e) {
  $(this).addClass('over'); // new

  ...

http://jsfiddle.net/YkaCM/1/