拖放設置自定義HTML爲拖動圖像

是否有可能以某種方式將我的自定義html對象設置爲event.dataTransfer.setDragImage(myCustomHtml,0,0)？拖放設置自定義HTML爲拖動圖像

我試過這樣

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

，但沒有奏效。

正如我通過Java這樣做，我使用本機方法，所以jQuery不是我的選擇。

來源

2015-12-10 Ziker

您可以通過拖動創建自定義元素或使用現有元素。如果您正在創建一個元素，您必須確保在將其添加到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>

來源

2015-12-12 13:26:40 DavidDomain

拖放設置自定義HTML爲拖動圖像

回答

相關問題