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

請注意，它以遞歸方式將內容向右移動以騰出空間，並在必要時移動整個行。

Answer 2

這不會直接回答您的問題，但是我將看一下這個jquery插件： Html5 Sortable