Question

所以我在这里按照HTML5拖放示例：

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

并创建了以下代码

问题是，我希望能够基本上交换整个元素及其数据属性，而不仅仅是内部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/

HTML5拖放 - 如何捕获和交换数据属性

2 个答案: