All geek questions in one place

Remove the moved item and reset the cursor using jQuery

I have a problem with drag and drop using 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 can see, I was dragging the cursor on the crosshairs while dragging, which works.

If you lower the green square to red, the cursor will not reset. It appears that the cursor is also attached to the red box and does not reset.

If you drop the green square elsewhere, the cursor is fully set.

What is the correct way to reset the cursor?

Or is something wrong with the removal?

+4
source share
3 answers

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

 $('body').css('cursor', 'auto');
+2
source

I think the cursor style is tied to the body for the "layer" question. I solved the same problem on my page using the style in the class used by jQuery on the current draggable object:

  .ui-draggable-dragging { cursor:move}

In this case (in the JSFiddle test case), you may notice that when your drag moves the droppable element over itself, the cursor is one of the highest z-position elements.

Try to reorder

 <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 for .draggable ().

If this applies to your real case, I think this may be a good alternative solution than resetting the cursor on the body element, because it is more specific.

+2
source

Try adding cursor: auto to your droppable:

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

I edited fiddle .

0
source

Source: https://habr.com/ru/post/1479892/

More articles:


All Articles