Question

我正在使用基本的HTML拖放功能，并且可以正常工作。但我需要实现一个功能，例如：

我有两个盒子放在div中。当我拖动第三个框并试图在两个框之间拖放时，在放置时，当放置被拖动框的鼠标指针到达前两个框之间时，一个框应通过留出一些空间来移动它。

如何实现此转换？

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag1" draggable="true"
ondragstart="drag(event)" width="336" height="69">

<div id="drag2" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>

如何在javascript拖放中使用HTML转换？

0 个答案: