jquery - ノックアウトでドロップ可能なJquery - 「ドロップ」内からキャンセルする方法は?

Question

私は次のものを持っています：

$(".subject-box").droppable({
        // revert: "invalid",
        activeClass: 'subject-box-active',
        hoverClass: 'subject-box-hover',
        accept: ".subject-box, .class-box",
        tolerance: 'intersect',
        drop: function (event, ui) {
            dropItem(ko.dataFor(ui.draggable.context), ko.dataFor(this));
            setTimeout(function () {
                $('#container').isotope('remove', ui.draggable);
            }, 0); 

        }
    });

.subject-boxそのため、またはの css クラスを持つものはすべて受け入れ、アイテムがドロップされたときに.class-box呼び出します。dropItemドロップアイテムはここにあります：

var dropItem = function(item, parent) {
    // do some evaluation of the item (dragged) and parent (accepts item being dragged)
    // possible cancel based on values of item or parent
    return;
};

これにより、itemandparentオブジェクトにアクセスできるようになるため、評価を実行できます。これは期待どおりに機能していますが、親オブジェクトの一部のプロパティ (特に auth 関連のプロパティ) が true の場合は、ドロップアクションをキャンセルする必要があります。

内からドロップアクションをキャンセルするか、親アイテムと子アイテムにアクセスしてそこで評価を実行するにはどうすればよいdrop:ですaccept:か?

score 1 · Accepted Answer

ビューモデルが UI と対話する方法を設計する際に考慮すべきことは、カスタムバインディングの使用です。これらにより、このタイプのロジックをアプリケーション全体でより一般的な方法で再利用できるようになり、この例で実行しようとしていることがより柔軟になります。

jquery ui のドラッグ/ドロップ機能を処理するカスタムバインディングを開発したこの一連のブログ記事を見つけることができました。

あなたの場合、次のようなことができます（上記のソースからのスニペット）

ko.bindingHandlers.drop = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var dropElement = $(element);
        var dropOptions = {
            tolerance: 'pointer',

            // add whatever other options here
            accept: function () {
                // check if the element has the right classes
                if (!dropElement.hasClass("subject-box") && !dropElement.hasClass("class-box")) {
                    return false;
                }
                // get reference to current and parent contexts

                // contains the parent context of current binding context
                var parent = bindingContext.$parent;

                // current context (item)
                var item = viewModel;

                // add logic here to determine if item is allowable based on current and parent viewmodels

            }, 
            drop: function(event, ui) {
                _hasBeenDropped = true;
                valueAccessor().value(_dragged);
                ui.draggable.draggable("option", "revertDuration", 0);
            }
        };
        dropElement.droppable(dropOptions);
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var dropElement = $(element);
        var disabled = !! ko.utils.unwrapObservable(valueAccessor().disabled);
        dropElement.droppable("option", "accept", disabled ? ".nothing" : "*");
    }
};

score -1 · Accepted Answer

これを使って：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

それはあなたのドロップを受け入れ、キャンセルしたい場合はその中で使用return falseします。

jquery - ノックアウトでドロップ可能なJquery - 「ドロップ」内からキャンセルする方法は?

2 に答える 2

Related

Reference