HTML5拖放 - 如何捕捉和交換數據屬性

Question

所以我跟着一個HTML5拖放到這裏例如：

http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-dataTransfer

，並創建了下面的代碼

http://jsfiddle.net/Vk5zT/

的問題是，我希望能夠實質上交換整個元素及其數據屬性，而不僅僅是內部html。我該怎麼做呢？

Answer 1

你可以交換元素本身，而不是序列化和修復新的元素。

 var parent = this.parentNode, 
      insertionPoint, elem = this; 

     do { 
      elem = elem.nextSibling; 
     } while (elem && elem !== draggedItem); 

     insertionPoint = elem ? this : this.nextSibling; 
     parent.insertBefore(draggedItem, insertionPoint); 
     draggedItem = null; 

http://jsfiddle.net/Vk5zT/11/

Answer 2

見http://jsfiddle.net/Vk5zT/7/：

$(this).replaceWith($(draggedItem).clone(true,true)); 
$(draggedItem).replaceWith($(this).clone(true,true)); 

但.clone(true,true)應該複製的事件偵聽器也一樣，但事實並非如此，那麼拖放停止工作。我解決了它創建功能addEvents：

function addEvents(){ 
    $('.segmentListItem').each(function(index){ 
     $(this)[0].addEventListener('dragstart',handleDragStart,false); 
     $(this)[0].addEventListener('drop',handleDrop,false); 
     $(this)[0].addEventListener('dragover',handleDragOver,false); 
    }); 
} 

然後：

$(this).replaceWith($(draggedItem).clone(true,true)); 
$(draggedItem).replaceWith($(this).clone(true,true)); 
addEvents(); 

編輯：

我有固定與事件偵聽器的問題，我已經適應了你的代碼的jQuery ：

http://jsfiddle.net/Vk5zT/12/