Remove a dragged element and reset cursor with jQuery

问题

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?

回答1:

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');

回答2:

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>

<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.

回答3:

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.

来源：https://stackoverflow.com/questions/16460182/remove-a-dragged-element-and-reset-cursor-with-jquery

标签

jquery

cursor

droppable