IE11 Drag And Drop change the cursor pointer on drag

Question

I have a drag and drop problem and am seeking advice for IE11 implementations.

The drag and drop API for IE11 is not robust, and I'm trying to squeeze as much usability out of this as is possible

Couple of questions -given the following simple example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div draggable="true" style="border:1px solid red; width:250px;">DRAG ME</div>

  <div style="width:500px;height:250px;border:1px solid blue" ondragover="event.preventDefault();return false">
     TO HERE
  </div>
</body>
</html>

https://jsbin.com/givuwokuxe/1/edit?html,js,output

a) If you notice - while dragging, it changes to an arrow with a plus sign (cursor: copy) How do I change the cursor from cursor: copy to cursor: move whilst dragging? Is this even possible?

b) Regarding the "drag ghost" element - is there any way to get the coordinates of that ghost element on dragEnd (instead of relying upon event.clientX/event.clientY)? I want to know because I'm moving this element, and am having a problem with WYSIWYG dragEnd since I'm positioning this x/left and y/top coordinate placement. If I drag on the right side of the element, and then dragEnd, the placement of the element is slightly offset and not exactly where the ghost was placed.

Thanks

Deepak-MSFT Deepak-MSFT · Accepted Answer · 2019-08-14T02:24:27

a) If you notice - while dragging, it changes to an arrow with a plus sign (cursor: copy) How do I change the cursor from cursor: copy to cursor: move whilst dragging? Is this even possible?

Ans = I suggest you to use DataTransfer.dropEffect property in your code may help to solve the issue for Internet Explorer.

The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur.

Example:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
 
  ev.dataTransfer.dropEffect = "move"
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag example</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>

<p id="drag1" draggable="true" ondragstart="drag(event)">Drag this text in to the box...</p>
</body>
</html>

Output:

b) Regarding the "drag ghost" element - is there any way to get the coordinates of that ghost element on dragEnd (instead of relying upon event.clientX/event.clientY)? I want to know because I'm moving this element, and am having a problem with WYSIWYG dragEnd since I'm positioning this x/left and y/top coordinate placement. If I drag on the right side of the element, and then dragEnd, the placement of the element is slightly offset and not exactly where the ghost was placed.

Ans = I did not get any sample code to get the coordinates of dragged element just using simple JS. I find some links that you can try to refer may give some idea to solve your issue.

(1) getting coordinates while dragging

(2) Drag'n'Drop with mouse events

(3) Draggable

IE11 Drag And Drop change the cursor pointer on drag

1 Answers