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

Question

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

我试过这样

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

但是没有用。

由于我通过 Java 执行此操作，因此我使用的是本地方法，因此 jQuery 不适合我。

Answer 1

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

这是一个包含一个现有元素和一个将被创建的示例。

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>