6

2 番目のテーブルにドロップできるドラッグ可能なテーブル セルのリストがあります。元のテーブルからアイテムがドラッグされた場合、元のテーブルは変更されないため、それらは複製するように設定されています。

今、2番目のテーブル内のドロップされた要素をセルからセルに移動できるようにしたいと考えています。ただし、2 番目のテーブル内で要素をドラッグしているときに Control キーを押すと、要素が複製されます。この最後の部分をエレガントに達成する方法がわかりません。

これまでの私のコードでは、Ctrl 部分のクローンのみが欠落しています:

$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
    {
        drop: function(event, ui) {
            if (ui.draggable.hasClass("draggable")) {
                ui.draggable.remove();
            }
            $('<div class="draggable"></div>').text(ui.draggable.text()).draggable({revert: "invalid"}).appendTo(this);
        }
    });

私が達成したい動作は、要素がテーブルの別のセルにドラッグされた場合、そこに移動する必要があるということです。Ctrl キーを押しながら要素をドラッグした場合、または常に複製する必要のある定義済み要素の 1 つである場合は、要素のコピーを作成してターゲット セルに挿入する必要があります。

ここに貼り付けたコードでは、ドロップ可能に追加される新しい要素を作成しています。これはドラッグ可能なクローンの場合は問題なく機能しますが、ドラッグ可能なクローン以外の場合は元のドラッグ可能なものが残るため、複製してしまいます。

代わりに、ドラッグ可能なものをターゲットのドロップ可能なものに追加すると、クローンのドラッグ可能なものは元の場所から削除されます。

編集: 私は問題を発見しました.クローンされたものを参照するui.helperではなく、元のドラッグ可能を参照するui.draggableを使用していました。参照として、最終的な作業コードをここに追加します。

$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
    {
        hoverClass: 'ui-state-hover',
        drop: function(event, ui) {
            ui.helper.remove()
            $('<div class="draggable"></div>').text(ui.draggable.text()).mousedown(function(event) 
                {$(this).draggable('option', {
                         helper : event.ctrlKey ? 'clone' : 'original' });
                         }).draggable({ revert: "invalid" }).appendTo(this);
        }
    });
4

1 に答える 1

15

次のように、呼び出しの前mousedownにハンドラーをアタッチすることでこれを行うことができます。.draggable()

$(".draggable").mousedown(function(event) {
  $(this).draggable('option', { helper : event.ctrlKey ? 'clone' : 'original'});
}).draggable({ revert: "invalid" });

ここで実際の動作を確認できます。ウィジェットも機能するため、イベントハンドラーは順序どおりにmousedown実行されるため、ウィジェットのハンドラーの前にイベントハンドラーをアタッチするだけです。したがって、実行しているのは、の直前にオプションを設定することだけです。ドラッグが始まります。helper

于 2010-08-27T11:49:27.357 に答える