拖放將自定義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>