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

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

Answer 2

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

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

2 个答案: