javascript - HTML5 拖放以重新排列网格中的小部件？

Question

我有一个由假想的小部件网格组成的仪表板，该网格有 2 行，每行有 3 个槽。我希望用户能够将一段内容拖到另一个插槽，然后它会替换插槽中已有的内容(将其推到右侧，可能会脱离网格)。我正在使用此代码来处理拖放。如何检测碰撞并移动目标插槽中的小部件？

<script type="text/javascript">
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>

每个网格槽都是这样的:

<div id="gridslot" ondrop="drop(event)" ondragover="allowDrop(event)"/>
<div id="widget" draggable="true" ondragstart="drag(event)"/>Some Content</div>
</div>

Answer 1

这是伪代码

function setContent(targetCell, content) {
    if (targetCell is off the grid)
        return;

    if (targetCell.content is not empty) {
        // we need to shift the targets content to the right
        setContent(targetCell.nextCellToTheRight, targetcell.content);
    }

    targetCell.content = content;
}

请注意，它会递归地将内容向右移动以腾出空间，必要时可能会移动整行。