HTML5排序DIV

Question

我有一个小问题，用HTML5拖拽& drop API。我们写代码让大家都能理解。

<div id="draggerContainer" droppable="true"> 
    <div class="draggableItem" draggable="true" data-id="001">[... Stuff inside like <img> and other <div> ...] </div> 
    <div class="draggableItem" draggable="true" data-id="002">[... Stuff inside like <img> and other <div> ...] </div> 
    <div class="draggableItem" draggable="true" data-id="003">[... Stuff inside like <img> and other <div> ...] </div> 
    <div class="draggableItem" draggable="true" data-id="004">[... Stuff inside like <img> and other <div> ...] </div> 
    <div class="draggableItem" draggable="true" data-id="005">[... Stuff inside like <img> and other <div> ...] </div> 
    <div class="draggableItem" draggable="true" data-id="006">[... Stuff inside like <img> and other <div> ...] </div> 
</div> 

嗯，这是awkard但我不知道如何使用拖动&拖放API。我已经尝试过html5rocks.com上的教程，但没有任何内容。有人能告诉我如何在html5和Js中启动和创建排序系统（如果可能，更好的jQuery）？

这是本教程的源代码。

function handleDragStart(e) { 
    // Target (this) element is the source node. 
    this.style.opacity = '0.4'; 
    dragSrcEl = this; 
    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', this.innerHTML); 
} 
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; 
} 
function handleDragEnter(e) { 
    // this/e.target is the current hover target. 
    this.classList.add('over'); 
} 
function handleDragLeave(e) { 
    this.classList.remove('over'); // this/e.target is previous target element. 
} 
function handleDrop(e) { 
    // this/e.target is current target element. 
    if (e.stopPropagation) { 
    e.stopPropagation(); // stops the browser from redirecting. 
    } 
    // See the section on the DataTransfer object. 
    return false; 
} 
function handleDragEnd(e) { 
    // this/e.target is the source node. 
    [].forEach.call(cols, function (col) { 
    col.classList.remove('over'); 
    }); 
} 
var cols = document.querySelectorAll('#draggerContainer .draggableItem'); 
[].forEach.call(cols, function(col) { 
    col.addEventListener('dragstart', handleDragStart, false); 
    col.addEventListener('dragenter', handleDragEnter, false) 
    col.addEventListener('dragover', handleDragOver, false); 
    col.addEventListener('dragleave', handleDragLeave, false); 
    col.addEventListener('drop', handleDrop, false); 
    col.addEventListener('dragend', handleDragEnd, false); 
}); 

我已经使用了教程中使用的JavaScript脚本HTML5Rocks。

Answer 1

http://jsfiddle.net/WxTqd/

首先，在拖拽时，发送data-id属性为拖动信息，让你知道哪些元素被拖动：

$("#draggerContainer") 
    .on("dragstart", ".draggableItem", function(e) { 
     e.dataTransfer.setData("id", $(this).data("id")); 
    }) 

您必须preventDefault()对dragover获得拖动工作：

.on("dragover", ".draggableItem", function(e) { 
    e.preventDefault(); 
}) 

而且在drop，你必须交换元素：

.on("drop", ".draggableItem", function(e) { 
    // get the element being dragged according to drag information 
    var id = e.dataTransfer.getData("id"); 

    var $draggingElem = $(".draggableItem").filter(function() { 
     return $(this).data("id") === id; 
    }); 


    // This is to make sure the element appears under the cursor 
    var indexDrag = $draggingElem.index(); 
    var indexThis = $(this).index(); 

    if(indexDrag < indexThis) { 
     $draggingElem.insertAfter(this); 
    } else if(indexDrag > indexThis) { 
     $draggingElem.insertBefore(this); 
    } 
}); 

这使用e.dataTransfer，其中jQuery的默认情况下不暴露。为了实现这一目标，每个页面加载一次执行这样的：

$.event.props.push("dataTransfer"); 

Answer 2

退房jquery ui sortable

这是一个非常简单的库