Toggle cursor to show where I can delete an item

Question

I have a question / task that is so obvious that I still wonder why I could not find a solution for this ...

In a JavaScript application using jQuery UI, I use the draggable() and droppable() to be able to move elements around. This works directly and as expected.
But now I want to change the mouse cursor so that it shows where I can delete an element ( cursor: "copy" ) or where it is impossible ( cursor: "no-drop" ).

This should be, of course, only during drag and drop, otherwise a regular cursor should be displayed.

Note. It can be assumed that a drop is allowed in only one special <div> (for example, identified by id or class ), and in all other respects, a drop is not allowed.

Answer 1

You can set the drag no-drop style to no-drop when dragging with the start of the callback event using css() and change it to copy when it is above the droppable inside over .

Once the dragged sheet is deleted, you can return the cursor to a no-drop in out callback event and set reset to return to the default cursor when dragging by setting the value of the CSS cursor property to initial in the stop callback of the draggable event, as shown below:

 $(function() { $("#draggable").draggable({ start: function(event,ui){ $(this).css("cursor", "no-drop"); }, stop: function(event,ui){ $(this).css("cursor", "initial"); } }); $("#droppable").droppable({ over: function(event, ui) { ui.draggable.css("cursor", "copy"); }, out: function(event, ui) { ui.draggable.css("cursor", "no-drop"); } }); }); 

 div { display: inline-block; margin: 20px; text-align: center; } #draggable { width: 50px; height: 50px; line-height: 50px; background: dodgerblue; } #droppable { width: 100px; height: 100px; line-height: 100px; background: hotpink; } 

 <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <div id="draggable"> <span>Drag</span> </div> <div id="droppable"> <span>Drop here</span> </div> 

Answer 2

Ok, thank you very much! All your answers were very helpful and inspired me to a solution that works for me: http://jsfiddle.net/qck9kf17/

The "trick" is basically:

 $('.box').draggable({ cursor: "no-drop" }); $('.container').droppable({ over: function(){ $('body').css('cursor','copy'); }, out: function(){ $('body').css('cursor','no-drop'); } }); 

Answer 3

Give dropzone to the class ( dropzone ), and when you start to drag, add the class to the body element ( draggingInEffect ) through Javascript.

Once you stop dragging, remove this class from the body.

Then add the CSS rule body.draggingInEffect .dropzone { cursor: url(whatever); } body.draggingInEffect .dropzone { cursor: url(whatever); }

Answer 4

Change the cursor when dragging

 $( ".selector" ).draggable({ cursor: "crosshair" }); 

Use the hover class when it is above the target point

 $( ".selector" ).droppable({ hoverClass: "drop-hover" });