CODEWITHSUNDEEP
htmldrag-and-dropinternet-explorer-11
Eyeless Whim
Eyeless Whim

Reputation: 270

IE11 Drag And Drop change the cursor pointer on drag

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

Upvotes: 0

Views: 761

Answers (1)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

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:

enter image description here

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

Upvotes: 1

Related Questions