HTML5を使用してドラッグ＆ドロップで要素をシフトする方法は？

Question

私はHTML Rocksのドラッグアンドドロップtutorialを使っています。現在のチュートリアルでは、基本的に、ドラッグされた要素とそれがドロップされた要素の切り替えを行います。 A点にあるものはB点に、B点はA点に移動します。

|A|B|C| --> |B|A|C| 
|D|E|F|  |D|E|F| 

このロジックを変更しようとしています。点Eをドラッグすると、他の点の間にあるはずです。

|A|B|C| --> |A|E|B| 
|D|E|F|  |C|D|F| 

これは私が持っているdemoです。

プロパティdropEffectを変更するか、移動するアイテムを追加するために新しいdivを作成する必要がありますか？

function handleDragStart(e) { 
    this.style.opacity = '0.4'; // this/e.target is the source node. 
} 

function handleDragOver(e) { 
    if (e.preventDefault) { 
    e.preventDefault(); // Necessary. Allows us to drop. 
    } 

    e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. 

    return false; 
} 

Answer 1

は、私は、このためのjQuery UI libraryを使用してい

を@tbirellと

の代わりに私が最初にやったのすべてのロジックを変更するには、このおかげで行う方法を見つけましたDIVを使用して、私はそれらをULとLIに置き換えます

<ul id="sortable"> 
    <li class=" ui-state-default">Item 1</li> 
    <li class=" ui-state-default">Item 2</li> 
    <li class=" ui-state-default">Item 3</li> 
    <li class=" ui-state-default">Item 4</li> 
    <li class=" ui-state-default">Item 5</li> 
    <li class=" ui-state-default">Item 6</li> 
</ul> 

ライブラリはこれのロジックを管理するものです。

$(function() { 
    $("#sortable").sortable({ 
     revert: true 
    }); 
    $("#draggable").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $("ul, li").disableSelection(); 
    }); 

demoのリンク。