11

並べ替え可能なビデオのリストと、ドラッグ可能な一連のビデオがあります。基本的に、ドラッグされたビデオがビデオの最初の 5 分間にないことを確認したいと考えています。ビデオの長さはさまざまであるため、ドロップ時にこれをテストしたいと思います。それまでの時間を合計し、5 分でない場合は元に戻してエラーを表示します。

テストを行うために、ドラッグ可能およびソート可能 (文書化されていない復帰コールバックを含む) のすべてのコールバックにフックしようとしましたが、何をしようとしても、DOM は常に変更されます (ソート可能は更新コールバックを呼び出します)...

誰か提案はありますか？

4

2 に答える 2

10

ドラッグ可能なcancelウィジェットのメソッドを呼び出すことで、ドラッグ操作を元に戻すことができます (そのメソッドは文書化されていませんが、その名前はアンダースコアで始まっていないため、確実に使用することが「より安全」になります)。ただし、他のイベントは遅すぎて元に戻すアニメーションをトリガーできないため、イベント中にのみ機能します。start

ただし、並べ替え可能なウィジェットは、ドラッグ操作がキャンセルされた場合でもドロップを登録するため、新しく追加されたアイテムも削除する必要があります (イベントの発生が早すぎるstopため、イベント中に)。start

$("#yourSortable").sortable({
    start: function(event, ui) {
        if (!canDropThatVideo(ui.item)) {
            ui.sender.draggable("cancel");
        }
    },
    stop: function(event, ui) {
        if (!canDropThatVideo(ui.item)) {
            ui.item.remove();
            // Show an error...
        }
    }
});

このフィドルで結果を確認できます(4 番目の項目は常に元に戻ります)。

更新: John Kurlak がコメントで正しく指摘しているように、 への呼び出しが原因でアイテムが元に戻るわけではありませんdraggable("cancel")がui.sender、null私たちの場合はそうです。何かを投げても同じ動作になります。

ui.sender残念ながら、私が試した他のすべての組み合わせでは、アニメーションが行われずにアイテムが元に戻されてしまうので、アクセスを避けて代わりに次のように書くのが最善の策かもしれません。

start: function(event, ui) {
    if (!canDropThatVideo(ui.item)) {
        throw "cancel";
    }
}

ただし、キャッチされなかった例外は引き続きコンソールに表示されます。

于 2011-08-19T19:31:47.220 に答える
3

別の方法を見つけました。アニメーションを元の場所に戻さなくても構わない場合は、いつでもこれを使用できます

.droppable({
    drop: function (event, ui) {

        var canDrop = false;

        //if you need more calculations for
        //validation, like me, put them here

        if (/*your validation here*/)
            canDrop = true;

        if (!canDrop) {
            ui.draggable.remove();
        }
        else{
            //you can put whatever else you need here
            //in case you needed the drop anyway
        }
    }
}).sortable({
    //your choice of sortable options
});

いずれにしてもドロップイベントが必要だったので、これを使用しました。

于 2014-04-01T11:12:28.037 に答える