CODEWITHSUNDEEP
javascripthtmlfirefoxdrag-and-drop
Kris Erickson
Kris Erickson

Reputation: 33834

In Firefox and IE how can change the cursor while dragging over different targets?

Doing drag and drop in HTML5, I need to be able to change the cursor depending upon the drop target. In Chrome this works by changing the dropEffect, 

 if (e.currentTarget.id == 'dropMove') {
     e.originalEvent.dataTransfer.dropEffect = 'move';
 } else {
     e.originalEvent.dataTransfer.dropEffect = 'link';
 }

however changing the dropEffect in IE and Firefox has no effect on the cursor. See the following Fiddle:

http://jsfiddle.net/ksoncan34/s7kN5/

I've tried manually setting the cursor, with window.cursor, but this also has no effect. How can I change the cursor for different drop targets in Firefox and IE?

Upvotes: 14

Views: 4410

Answers (3)

Larry Williamson
Larry Williamson

Reputation: 1143

I'd suggest using jQuery ui -- droppable and draggable.

You can hide the default/actual cursor using cursor: none and use a stylized DOM element to render your own 'cursor' element.

I've provided an example here: http://jsfiddle.net/lawrencealan/WMyu7/78/ (updated 6/8/2017)

Note: mousemove stops firing during dragging of "draggable" attributed elements.

--

EDIT: As of September 2019, the example is now broken.

Upvotes: 5

pschueller
pschueller

Reputation: 4427

Unfortunately the support for cursor change on .dropeffect seems to be lacking.

You could try to attach an element to the mouse X and Y coords and manipulate that as it moves, but it can get messy. I think that lawrencealan's jQuery UI solution, which does just that, is probably the only reliable way to do this... and is actually quite simple. Still I would like to suggest an alternative which may suit your needs just as well, and does not require jQuery UI:

Alternative:

Instead of binding code to mousemove and dealing with unreliable cursor manipulations, I would suggest to simply have the targets change their appearance when you drag over them.

For example: jsfiddle

Add something like this to your dragover function:

$(this).addClass('draggedover');

Make sure to remove it on dragleave:

$('.drop').bind('dragleave', function (e) {
    $(this).removeClass('draggedover');
});

And then add some CSS to go along with it:

.draggedover::before {
    content: '';
    background-image: url('https://i.sstatic.net/czlkT.jpg');
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
}
#dropMove.draggedover::before {
    background-position: -110px -70px;
}

#dropLive.draggedover::before {
    background-position: -5px -10px;
}

Upvotes: 1

spaque99
spaque99

Reputation: 86

I found this link while searching: https://connect.microsoft.com/IE/feedback/details/780585/dropeffect-not-working-properly-in-ie-standard-mode-ie9-ie10

Looks like Microsoft is rejecting this as working by design. What might help is the 3rd comment that suggest a way to fix the usability issue. He did not share any code though.

Upvotes: 0

Related Questions