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> 

每個gridslot是這樣的：

<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