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元素中添加了一个负顶值来隐藏它，但我确信还有其他方法可以解决这个问题。

以下是一个现有元素和将要创建的元素的示例。

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

<div class="drag-me" draggable="true">Drag Me Foo</div>

<div class="drag-me" draggable="true">Drag Me Bar</div>

＆＃13;

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

1 个答案: