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

所以我跟着一個HTML5拖放到這裏例如：HTML5拖放 - 如何捕捉和交換數據屬性

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

，並創建了下面的代碼

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

2012-08-15 mheavers

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

 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/

來源

2012-08-15 17:51:22 Esailija

嗯 - 有一點點關閉。你將如何設置它，以便它不交換元素，但實際上在添加它們之前或之後，取決於它以前的位置。換句話說，如果你有1,2,3並且你拖動了3以上，那麼順序應該是2,3,1。如果你有1,2,3並且你把3拖到1以上，那麼順序應該是3,1,2。我知道我之前說過交換 - 但真正我想要做的是按順序排序。 – mheavers 2012-08-15 18:05:59

@mheavers現在應該這樣做http://jsfiddle.net/Vk5zT/10/ – Esailija 2012-08-15 18:14:38

見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/

來源

2012-08-15 17:54:46 Oriol

'jQuery＃clone'只複製jQuery事件。 jQuery沒有訪問權限（它怎麼可能有：P）到正常的事件監聽器，所以它不能複製它們。 – Esailija 2012-08-15 19:14:19

@Esailija你是對的，當我意識到我已經修復了http://jsfiddle.net/Vk5zT/12/，添加了使用Jquery的事件監聽器。 – Oriol 2012-08-15 19:35:55

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

回答

相關問題