拖动&将自定义HTML拖放设置为拖动图像

Drag & drop set custom HTML as drag image

本文关键字：拖动 拖放 设置 图像 HTML 自定义 amp      更新时间：2023-09-26

是否可以以某种方式将我的自定义html对象设置为event.dataTransfer.setDragImage(myCustomHtml,0,0)？

我试过像这个

var x=$doc.getElementById("row_selected_notification");
event.dataTransfer.setDragImage(x, 100, 100);

但没有奏效。

当我通过Java完成这项工作时，我使用的是本机方法，所以jQuery对我来说不是一个选项。

您可以在拖动时创建自定义元素，也可以使用现有元素。如果您正在装箱一个元素，则必须确保在将其添加到DOM后它不可见。我刚刚在create元素中添加了一个负的top值来隐藏它，但我相信还有其他方法可以解决这个问题。

下面是一个示例，其中包含一个现有元素和一个将要创建的元素。

var foo = document.getElementsByClassName("drag-me").item(0),
    bar = document.getElementsByClassName("drag-me").item(1);
// Drag foo and create custom element.
foo.addEventListener("dragstart", function(e) {
  var elem = document.createElement("div");
  elem.id = "drag-ghost";
  elem.textNode = "Dragging";
  elem.style.position = "absolute";
  elem.style.top = "-1000px";
  document.body.appendChild(elem);
  e.dataTransfer.setDragImage(elem, 0, 0);
}, false);
// Drag bar and use foo as ghost image
bar.addEventListener("dragstart", function(e) {
  e.dataTransfer.setDragImage(foo, 0, 0);
}, false);
// Let's remove the created ghost elem on dragend
document.addEventListener("dragend", function(e) {
  var ghost = document.getElementById("drag-ghost");
  if (ghost.parentNode) {
    ghost.parentNode.removeChild(ghost);
  }
}, false);
.drag-me {
  width: 100px;
  padding: 30px 0;
  text-align: center;
  color: white;
  display: inline-block;
}
.drag-me:nth-child(1) {
  background-color: green;
}
.drag-me:nth-child(2) {
  background-color: red;
}
#drag-ghost {
  width: 200px;
  height: 200px;
  background-color: yellow;
}
<div class="drag-me" draggable="true">Drag Me Foo</div>
<div class="drag-me" draggable="true">Drag Me Bar</div>

相关文章：