2

そこで、HTML5のドラッグアンドドロップの例に従いました。

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

次のコードを作成しました

http://jsfiddle.net/Vk5zT/

問題は、内部のhtmlだけでなく、要素全体とそのデータ属性を本質的に交換できるようにしたいということです。どうすればよいですか？

4

2 に答える 2

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/

于 2012-08-15T17:51:22.993 に答える
1

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-15T17:54:46.913 に答える