Like the style of a draggable item

Question

So, there are a few events that I can use to handle drag and drop:

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

There is a drag event that fires when an item is dragged. I can control the style of the source element or the target container container, but how can I create a ghost element created by the browser?

I want to remove the disabled icon from it when the item is above the area without dragging and replace it with the cursor-move icon

Here is what I still have:

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 how to use this can be found at the following location, the parameter is changed to dragstart (set to use the default cursor "arrow"), dragover (set to use automatic cursor dragging (arrow with copy)) and dragleave (reset use cursor "arrow" default):

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

---

Try the answers to:
Javascript: how can I position the cursor during a drag and 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/

Answer 2

You cannot customize this style directly, as this is a bitmap / copy of what the item looked like when you started dragging:

http://jsfiddle.net/2EvGP/

EDIT:

You can actually fool to achieve this by briefly changing the style of the element when you drag and drop: 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 a style change depending on how you drag and drop Firefox 13. You will need to reset the style of the dragged item when it is deleted.

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

Answer 3

basically you want to apply a specific style to a newly created element that is the son of #droppable?

 #droppable div { here your code }