Search code examples
jquerymouse-cursordroppable

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?

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