1

新しいバッグに要素をドロップするときに確認モーダル ダイアログ (UI キット) を表示したいと思います (Angular 1.4.8 と angular-dragula を使用しています)。[OK] をクリックするとプロセスを続行したいのですが、[いいえ] をクリックすると、要素を元のバッグに戻したいと思います。

これはこれまでの私のコードです:

dragulaService.options($scope, 'tasks', {
    revertOnSpill: true
});

$scope.$on('tasks.drop', function (e, el, target, source) {
    if (target[0].id == 'done') {
        UIkit.modal.confirm("Are you sure?", function(){
            console.log('drag confirmed');
        }, function(){
            // the function cancelling the drop...
        });
    } else {
        console.log('drag confirmed - no modal required');
    }
});

これまでのところ、ダイアログは完全に表示されており、[いいえ] をクリックするとイベントがトリガーされ、ドロップをキャンセルする方法が見つかりません (dragula のドキュメントで見つけようとしましたが、機能しませんでした。

ありがとうございました。

4

1 に答える 1

5

これは手動で行う必要があると思いますが、Dragula はこのための組み込みメカニズムを提供していないようです。項目がコンテナにドロップされると、DOM に追加されます。

要素を削除して、ソース コンテナーに戻す必要があります。

$scope.$on('tasks.drop', function (e, el, target, source) {
    if (target[0].id === "done" && source[0].id !== "done") {
        UIkit.modal.confirm("Are you sure?", function(){}, function(){
            $(el).remove();
            $(source).append(el);
        });
    }
});

source[0].id !== "done"「完了」コンテナ内の項目を並べ替えた場合にモーダルがポップアップしないように を追加しました。

また、これはソース コンテナーの以前の順序を考慮していないことにも注意してください。要素を最後の要素として追加するだけです。

JSFiddleはこちらから入手できます。

于 2016-02-21T00:36:53.433 に答える