jquery - Jquery のドラッグ アンド ドロップは、セルのコンテンツを移動する代わりにコピーします

Question

私は2つのテーブルを持っています:

• 表 1 は、表 2 内の任意の場所にコピーできる静的データを保持します。
• テーブル 2 は、テーブル 1 からコピーされたデータによって、またはこのテーブル内でデータを移動することによって更新できます。

移動を除いて、すべてが機能します。ドラッグ/ドロップするとコンテンツがコピーされます。

誰か手がかりを得ましたか？

ここでは、オンライン サンプルを見ることができます。

Answer 1

回避策で問題を解決しました。元の TD からコンテンツを削除するだけです。そして、ゴミ箱として機能するテーブルを追加しました。

オンライン サンプルは、実行すべきことをすべて実行します。ただし、これが最も効率的な方法であるかどうかはわかりません。jqueryに関しては、私はかなり経験が浅いです。

したがって、誰かが同じことを行うよりエレガントなソリューションを持っている場合、私は喜んで学びます:)

念のため、私が使用する JQ コードは次のとおりです。

jQuery(function($) {
var td1 = $("#table1 td");
var td2 = $("#table2 td");
var bin = $("#trash td");

td1.draggable({
    cursor: "move",
    appendTo: "body",
    helper: "clone",
    opacity: "0.5",
    revert: "invalid"
});

td2.draggable({
    cursor: "move",
    appendTo: "body",
    helper: "clone",
    opacity: "0.5",
    revert: "invalid"
});

td2.droppable({
    accept: 'td',
    tolerance: "pointer",
    drop: function (event, ui) {
        // check from which table we are dragging
        var fromTable = $(ui.draggable).closest("table").attr("id");
        // check from which td we are dragging
        var fromTD = $(ui.draggable).attr("id");
        // get the inner html content for the td we are dragging the div from 
        var cell = $(ui.draggable).html();
        // insert the complete html content into the target drop cell
        $(this).html(cell);
        // for purposes of result logging / debugging
        var location = $(this).attr('id');
        $('#result').html('Moved '+cell+'<br>From '+fromTable+' / '+fromTD+' (table / td)<br>To cell: '+location+'<br>complete with containing DIV');
        // in case we moved cell content within table2, remove the original content
        if(fromTable == "table2"){
            $(ui.draggable).html('<div></div>');
        }
    }
});

bin.droppable({
    accept: 'td',
    tolerance: "pointer",
    drop: function (event, ui) {
        // check if we are dragging from table 2 
        var fromTable = $(ui.draggable).closest("table").attr("id");
        if(fromTable != "table2"){
            $('#result').html('You cannot move content<br>from '+fromTable+' to the trash bin...');
            return false;
        }
        else {
            // check from which td we are dragging
            var fromTD = $(ui.draggable).attr("id");
            // get the inner html content for the td we are dragging the div from 
            var cell = $(ui.draggable).html();
            // insert the complete html content into the target drop cell
            $(this).html(cell);
            // for purposes of result logging / debugging
            var location = $(this).attr('id');
            $('#result').html('Moved '+cell+'<br>From '+fromTable+' / '+fromTD+' (table / td)<br>To the trash bin');
            // replace the content of the source td after drop
            $(ui.draggable).html('<div></div>');
        }
    }
});

});