Question

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

用于IE11的拖放API不够健壮，我正在尝试尽可能地利用这种可用性

问题夫妇-给出以下简单示例：

search#list

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

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

b）关于“拖动重影”元素-有什么方法可以在dragEnd上获取该重影元素的坐标（而不是依赖于event.clientX / event.clientY）？我想知道是因为我正在移动此元素，并且由于我要定位此x / left和y / top坐标位置而对WYSIWYG dragEnd产生了问题。如果我先拖动该元素的右侧，然后拖动dragEnd，则该元素的位置会稍微偏移，并且不完全是幻影的放置位置。

谢谢

Answer 1

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

答案 =我建议您在代码中使用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产生了问题。如果我先拖动该元素的右侧，然后拖动dragEnd，则该元素的位置会稍微偏移，并且不完全是幻影的放置位置。

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

（1）getting coordinates while dragging

（2）Drag'n'Drop with mouse events

（3）Draggable

IE11拖放更改拖动时的光标指针

1 个答案: