Remove a dragged element and reset cursor with jQuery

StackOverflow https://stackoverflow.com/questions/16460182

  •  19-04-2022
  •  | 
  •  

Question

I have a problem using drag and drop with jQuery. Here's a very simple fiddle that shows what I mean (http://jsfiddle.net/Znt44/1/):

$('#drop').droppable({
    drop: function (e, ui) {
        ui.draggable.remove();
    }
});
$('#drag').draggable({
    cursor: 'move'
});

As you see, I set the cursor to a crosshair when dragged, which works.

If you drop the green box on the red one, the cursor will not reset. It looks like the cursor is attached to the red box as well, and is not resetted.

If you drop the green box anywhere else, the cursor is resetted perfectly.

What is the proper way to reset the cursor?

Or is something wrong with the remove?

Was it helpful?

Solution

In my case I noticed that while dragging it forces style="cursor:move" on my parent element. So I forced to style="cursor:auto" at the end of drop method (my parent element was <body>):

$('body').css('cursor', 'auto');

OTHER TIPS

I think cursor style is attached to body for a matter of "layer". I solved the same issue in my page using style on the class applied by JQuery to the currently dragged object:

 .ui-draggable-dragging { cursor:move}

In this case (in your JSFiddle test case) you can notice that when your drag is hover the droppable element the cursor is the one of the highest z-position element.

Try to change the order of

<div id="drag">drag me!</div>
<div id="drop"></div>

to

<div id="drop"></div>
<div id="drag">drag me!</div>

and you see the difference. Or you can use the zIndex property of the .draggable().

If it is appicable to your real case I think it can be a good alternative solution than reset cursor on body element, because it is more specific.

Try adding cursor: auto on your droppable:

$('#drop').droppable({
cursor: 'auto',
drop: function (e, ui) {
    ui.draggable.remove();
 }
});
$('#drag').draggable({
    cursor: 'move'
});

I have edited your fiddle.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top