拖放将自定义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元素中添加了负的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>