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

是否有可能以某种方式将我的自定义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;
}

Drag Me Foo

Drag Me Bar