1

ドラッグ可能な要素があります

$(".element").draggable({
helper: "clone",
revert: 'invalid',
containment: '#parent',
appendTo: '#parent'
});

2 つの問題があります。

  1. この要素がドロップされると、元の要素は自動的に無効になります。

  2. ドロップされた要素には、クローズ アンカー タグが追加されます。この「閉じる」をクリックすると、元の要素は再びドラッグ可能になり、ドロップ可能な「div」から削除する必要があります。

次のようにクローズアンカーのハンドラーを作成しました。これは要素をドロップ可能から削除しますが、再度ドラッグ可能にはしません。

$('.cancel a',ui.helper).click(function()
{
   $(ui.helper).remove();
   $(ui.draggable).draggable('enable');
});

助けてください。前もって感謝します。

4

3 に答える 3

1

最初の問題に対する答えは、ドラッグ可能な要素の無効なオプションを false に設定することです。

    $(".element").draggable({
      helper: "clone",
      revert: 'invalid',
      disabled: false,
      containment: '#parent',
      appendTo: '#parent'
    });

アンカーを閉じるハンドラーで、ドラッグしたいドラッグ可能なオブジェクトを有効にします。例えば、

    $('.cancel a',ui.helper).click(function()
    {
       $(ui.helper).remove();
       $('#element').draggable('enable');
    });
于 2012-07-18T06:31:04.280 に答える
0

次のように、ドロップされたドラッグ可能なインデックスを保持する配列を作成する同様のことを行いました。

var $drop = $(selector for my droppable),
    $drag = $(selector for my draggable),
    dragged = [];
$drop.droppable({
    drop: function (e, ui) {
        var dragIndex = $drag.index(ui.draggable);
        dragged[$drop.index($(this))] = dragIndex;
    }
});

次に、キャンセル機能でドラッグ可能を再度有効にするには、次のようにします。

$('.cancel a').click(function() {
    var clickIndex = $(selector for droppable).index($(this).parent()),
        whichDrag = dragged[clickIndex];
    $drag.eq(whichDrag).draggable("enable");
});

によって返される要素は、ドロップ可能なセレクターの要素と一致すると推測してい$(this).parent()ます。そうでない場合は、別のトラバーサルを行う必要があります。

基本的な考え方は、ドラッグされたアイテムのインデックスを見つけて、draggedドロップされたアイテムのインデックスと同じ位置にある配列に格納することです。次に、キャンセル時に、ドラッグ可能なアイテムがドロップされたアイテムのインデックスを使用してdragged、元のドラッグ可能な位置に一致する配列から値を取得し、それを有効にします。

于 2012-07-17T16:56:17.910 に答える
0

Drop イベント (?) でドラッグ可能なものを無効にしていると思いますが、
$(ui.draggable)まだそこにコンテキストがありました。ただし、クリック イベントではドラッグ可能なオブジェクトにアクセスできなくなり、代わりに直接ドラッグする要素を選択する必要があります。例:$("#element").draggable("enable")

于 2011-05-18T11:04:20.297 に答える