38

これが別の質問で回答されている場合は申し訳ありませんが、私の問題に固有の回答が見つかりませんでした!

jQuery ドラッグ可能オブジェクトが合法的なドロップ可能オブジェクトの外にドロップされているかどうかをテストしようとしています。これは通常、ドラッグ可能を元に戻すことで 90% の確率で解決されますが、私はそうしたくありません。代わりに、ドラッグ可能オブジェクトがドロップ可能オブジェクトにドロップされた場合は 1 つのことを実行し (うまく機能しています!)、可能なすべてのドロップ可能オブジェクトの外にドロップされた場合は別のことを実行したいと考えています (現在、私はうまくやっています!)。

手短に：

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

本当に明らかな何かが欠けているような気がします...助けてくれてありがとう！

4

6 に答える 6

56

ドロップ可能なドロップ イベントはドラッグ可能な停止イベントの前に発生するため、次のように、ドロップ イベントでドラッグされている要素にフラグを設定できると思います。

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        ui.helper.data('dropped', true);
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    start: function(event, ui) {
        ui.helper.data('dropped', false);
    },
    stop: function(event, ui)
    {
        alert('stop: dropped=' + ui.helper.data('dropped'));
        // Check value of ui.helper.data('dropped') and handle accordingly...
    }
});
于 2011-11-11T11:37:06.687 に答える
9

すでに回答を得ているようです。とにかく、今日も同じ問題があり、次のように解決しました。

var outside = 0;

// this one control if the draggable is outside the droppable area
$('#droppable').droppable({
    accept      : '.draggable',
    out         : function(){
        outside = 1;
    },
    over        : function(){
        outside = 0;
    }
});

// this one control if the draggable is dropped
$('body').droppable({
    accept      : '.draggable',
    drop        : function(event, ui){
        if(outside == 1){
            alert('Dropped outside!');
        }else{
            alert('Dropped inside!');
        }
    }
});

ドラッグ可能オブジェクトのオプションを変更できなかったため、これが必要だったので、ドロップ可能オブジェクトのみを使用する必要がありました (素晴らしいFullCalendarプラグイン内で必要でした)。ドロッパブルの「貪欲な」オプションを使用すると問題が発生する可能性があると思いますが、ほとんどの場合は機能するはずです。

PS: 下手な英語で申し訳ありません。

編集:提案されているように、jQuery.data; を使用してバージョンを作成しました。ここで見つけることができます：jsfiddle.net/Polmonite/WZma9/

とにかくjQuery.dataのドキュメントは言う:

Internet Explorer では expando プロパティを介したデータの添付が許可されていないため、このメソッドは現在、XML ドキュメントにデータを設定するためのクロスプラットフォーム サポートを提供していないことに注意してください。

(つまり、IE 8 より前では動作しません)

EDIT 2: @Darin Peterson が指摘したように、前のコードは複数のドロップ領域では機能しません。これで問題が解決するはずです：http://jsfiddle.net/Polmonite/XJCmM/

EDIT 3: EDIT 2 の例にはバグがあります。ドラッグしたら「ドラッグミー！」下のドロッパブルに「Drag me too」をドロップし、「Drag me too」を上のドロッパブルにドロップしてから、「Drag me too」を外側にドロップすると、「Dropped inside!」というアラートが表示されます。だから、それを使用しないでください。

EDIT 4: @Aleksey Gor が指摘したように、Edit 2 の例は間違っていました。実際には、すべてのドラッグ可能/ドロップ可能をループする方法を説明するための例でしたが、実際には警告メッセージを削除するのを忘れていたので、かなり混乱しました. ここで更新されたフィドル。

于 2012-10-23T17:04:57.007 に答える
4

ドロップ可能な要素の「アウト」イベントを使用してみてください。

これはドキュメントです

「このイベントは、受け入れられたドラッグ可能オブジェクトが (許容範囲内で) このドロップ可能オブジェクトにドラッグされるとトリガーされます。」私が正しければ、これはあなたが必要とするものです。

また、ページ全体に要素オーバーレイを作成することもできます。要素がそこにドロップされると、イベントが発生します。最善ではありませんが、それを行う唯一の方法だと思います。これらのイベントを発生させるには、他の「ドロップ可能な」アイテムが必要だからです。

于 2011-11-11T11:04:52.790 に答える
1

次の例の利点は、ドロップ可能なコードを変更したり、知ったりする必要がないことです。

ドラッグ可能な元に戻すプロパティには、関数 (値){} を含めることができます。値が引数として渡され、ヘルパーが要素 (ドロップ要素) にドロップされたかどうかを示します。要素にドロップされていない場合 (ドロップアウトまたは受け入れられない) は「false」です。

注: ヘルパーに元に戻すかどうか (true/false) を伝えるには、元に戻す関数から正しい bool 値を返す必要があります。True ははいを意味します。ヘルパーを元の位置に戻します。ヘルパーをスロー モーションで戻します (そのままの状態で)。False はいいえを意味し、ヘルパーを突然削除するだけです。revert プロパティを「無効」に設定すると、

  • 「はい、外にドロップした場合は、ヘルパーを元に戻します」
  • 「いいえ、ドロップ可能な要素にドロップされて受け入れられた場合は、すぐにヘルパーを殺してください」.

私の推測では、開始イベント中に data プロパティを使用して、現在の ui ヘルパーをドラッグ可能なコンテナーに追加できると思います。次に、データ プロパティから元に戻す関数でそれを取得します。次に、削除されたかどうかを示すプロパティをヘルパーに追加します。その後、最終的に停止イベントで、このデータ プロパティの値を確認し、意図したとおりに実行します。

ドラッグ可能のイベント/関数呼び出しの順序: 開始 - 復帰 - 停止

これは例です：

jQuery('#draggable').draggable(
{
    start: function(event, ui) {
        $(this).data('uihelper', ui.helper);
    },
    revert: function(value){
        var uiHelper = (this).data('uihelper');
        uiHelper.data('dropped', value !== false);
        if(value === false){
             return true;
        }
        return false;
    },
    stop: function(event, ui)
    {
        if(ui.helper.data('dropped') === true){
            // handle accordingly...
        }
    }
});

ui.helper.remove() の data('dropped') 値に応じて、revert 関数で true を返し、代わりに停止イベント中にヘルパーを削除することもできます。または、まだ悪い日がある場合は、CSS3 で爆発させることもできます ;)

于 2016-07-07T13:30:19.390 に答える