javascript - HTML 5拖放并使用javascript

所有，

我正在尝试使用HTML5拖放和javascript。但是，我无法将项目放到释放鼠标的相同位置。每当我将一个项目放到destinationContainer中时，X和Y坐标分别不适用于顶部和左侧样式。

我提供了一个jsfiddle供参考。此外，我还包含了代表我的drop事件的代码段。

谢谢你的帮助！

https://jsfiddle.net/mdevera/94vzuo89/2/

function drop(event) {

console.log("drop");

event.preventDefault();

var id = event.dataTransfer.getData("text/plain");

if ((id === "item1" || id === "item2") && event.target.className === "destinationContainer" ) {

    var clone = document.getElementById(id).cloneNode(true);

    clone.id = Math.floor((Math.random() * 100) + 1);

    /// Style for making item drop in the same mouse location of drop. Does not work.
    //clone.style.top = event.clientY + "px";
    //clone.style.left = event.clientX + "px";


    clone.style.position = "relative";
    event.target.appendChild(clone);

}

}

最佳答案

您可以尝试使用X和Y使用jQuery获取element.offset().top或element.offset().left位置。