1

ドロップ可能なものdiv#spaceとドラッグ可能なもののコレクションがありli.elementます。をドラッグするli.elementとdiv#space、新しいul.groupものが作成され、にli.element追加され、ul.group最後にul.groupドロップ可能になります。

与えられた

これらの要素を次のように動作させたいと思います。

  1. それを含まないにli.elementドロップすると、はに追加されますul.groupli.elementul.group
  2. それを含むli.elementにドロップするとul.group、は元の位置に戻りますli.element
  3. が（の外側に）li.elementドロップされると、上記のように新しいグループが作成されます。div#spaceul.group

ul.group問題は、要素がそれを受け入れない要素にドロップされると、親div#spaceがイベントをキャッチして新しいグループを作成することです。

には、droppableが要素ul.grpupであるかどうか、およびまだドロップされていないかどうかをチェックするaccept関数があります。

newULGroup.droppable({
    drop: ...
    accept: function(ui)
    {
        var isElement = ui.hasClass('element')
        var elementId = '.' + ui.data().id
        var isAlreadyPresent = $(this).find(elementId).length > 0
        return isElement && (!isAlreadyPresent)
    },
    greedy: true
});

ドロップハンドラーですべてを受け入れて無視しない場合、この動作をどのように実装しますか？（私は試していませんが、うまくいくと思います）

編集

それを修正する試み

jquery-ui-1.8.4.jsにパッチを適用して、イベントをaccept関数に渡しました。これで、を使用して伝播を停止できますが、ドラッグ可能なヘルパーを手動で$(event).stopPropagation()アニメーション化して元の位置に戻し、復帰をシミュレートしてから、domから削除する必要があります。

accept: function(ui, event)
{
    var isCriteria = ui.hasClass('criteria')
    var criteriaId = '.' + ui.data().id
    var isAlreadyPresent = $(this).find(criteriaId).length > 0
    var accepted = isCriteria && (!isAlreadyPresent)
    if (event && !accepted)
    {
        $(event.target).animate(ui.offset(), {complete: function() {$(this).remove()}})
        $(event).stopPropagation()
    }
    return accepted
}

残念ながら、元の要素からのドラッグ可能な動作も破壊されているようです。なんで、なんで？

4

1 に答える 1

1

文書化されていない jQuery.ui 機能を使用していますが、同様の動作を実現することができました。

実装を調べるとjquery.ui.draggable(少なくとも v1.8.16 の場合)、revertオプションは関数にすることもできます。それはthisドラッグ可能な要素であり、ドロップを受け入れたドロップ可能である単一のパラメーターであり、戻り値はbooleanドラッグ可能を元に戻すかどうかを示すためのものです。

だからあなたの場合、あなたがする必要があります

  1. あなたdiv#spaceとul.group常にドロップを受け入れ、貪欲になる
  2. ul.groupdropハンドラーでチェックを行い、アイテムがまだグループにない場合にのみアイテムを処理します
  3. ドラッグ可能な関数で同様のチェックを行い、revert既にグループ内にある場合は元に戻します。
于 2011-11-13T20:50:12.250 に答える