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

HTML5 drag and drop to rearrange widgets in a grid?

本文关键字：网格 小部 排列 拖放 新排列 HTML5      更新时间：2023-09-26

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

这是伪代码

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

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

这并不能直接回答您的问题，但我会看看这个jquery插件： Html5 可排序

相关文章：