拖放设置自定义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为拖动图像

回答

相关问题