2

我有一个由假想的小部件网格组成的仪表板，网格有 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>
4

2 回答 2

0

这是伪代码

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;
}

请注意，它递归地将事物向右移动以腾出空间，如有必要，可能会移动整行。

于 2012-06-23T18:41:25.637 回答
0

这不会直接回答你的问题，但我会看看这个 jquery 插件：Html5 Sortable

于 2012-09-06T14:49:39.617 回答