IE11 Drag And Drop 在拖动时更改光标指针答案

【问题标题】：IE11 Drag And Drop change the cursor pointer on dragIE11 Drag And Drop 在拖动时更改光标指针
【发布时间】：2019-08-13 21:26:27
【问题描述】：

我遇到了拖放问题，正在寻求有关 IE11 实施的建议。

IE11 的拖放 API 并不可靠，我正在尝试尽可能多地使用它

几个问题——举个简单的例子：

<!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) 如果您注意到 - 拖动时，它会变为带加号的箭头（光标：复制）如何将光标从光标更改：复制到光标：拖动时移动？这甚至可能吗？

b) 关于“拖动幽灵”元素 - 有没有办法在 dragEnd 上获取该幽灵元素的坐标（而不是依赖 event.clientX/event.clientY）？我想知道，因为我正在移动这个元素，并且由于我正在定位这个 x/left 和 y/top 坐标位置，所以我遇到了 WYSIWYG dragEnd 的问题。如果我在元素的右侧拖动，然后再拖动结束，则元素的位置会稍微偏移，而不是准确放置重影的位置。

谢谢

【问题讨论】：

标签： html drag-and-drop internet-explorer-11

【解决方案1】：

a) 如果您注意到 - 拖动时，它会变为带有加号的箭头（光标：复制）如何将光标从光标更改为：复制到光标：拖动时移动？这甚至可能吗？

Ans = 我建议您在代码中使用 DataTransfer.dropEffect 属性可能有助于解决 Internet Explorer 的问题。

DataTransfer.dropEffect 属性控制在拖放操作期间向用户提供的反馈（通常是可视的）。它会影响拖动时显示的光标。例如，当用户将鼠标悬停在目标放置元素上时，浏览器的光标可能会指示将发生哪种类型的操作。

例子：

<!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>

输出：

b) 关于“拖拽幽灵”元素 - 有没有办法在 dragEnd 上获取幽灵元素的坐标（而不是依赖 event.clientX/event.clientY）？我想知道，因为我正在移动这个元素，并且由于我正在定位这个 x/left 和 y/top 坐标位置，所以我遇到了 WYSIWYG dragEnd 的问题。如果我在元素的右侧拖动，然后再拖动结束，则元素的位置会稍微偏移，而不是准确放置重影的位置。

Ans = 我没有得到任何示例代码来仅使用简单的 JS 来获取拖动元素的坐标。我发现一些您可以尝试参考的链接可能会为解决您的问题提供一些想法。

(1)getting coordinates while dragging

(2)Drag'n'Drop with mouse events

(3)Draggable

【讨论】：

谢谢。关于答案 (a) - javascript MDN 对允许的 dropeffect/effect 的支持并不模棱两可。感谢您展示一个工作示例。
关于 (b) - 使用 JS 框架的混合解决方案，没有明确的解决方案。我希望将其作为重影图像放置在放置区域中的确切位置。查看上面的拖动示例 - 从重影图像的放置位置和放置元素实际放置的位置放置时会有一点闪烁。
如果可能的话，不要尝试提供任何可以重现该问题的示例。您在原始帖子中的示例代码不会产生第二个问题。这将有助于我们更好地理解这个问题。感谢您的理解。
jsbin.com/mimepevofa/1/edit - 当你从 L 抓起并放下时，它看起来不错，但与幽灵的位置不完全匹配。如果你从 M 和 R 抓起，事情就会变得愚蠢。
如果发现这一点 - 在 dragstart 中 - 你计算鼠标指针到被拖动元素的上/左边缘的距离（通过 dataTransfer 传递信息）在放置时，将偏移量应用到上/左坐标，你会得到所见即所得的效果。