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); 

        }
    });

所以我接受css类.subject-box或.class-box的任何内容，然后在删除项目时调用dropItem。 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;
};

这使我可以访问item和parent对象，因此我可以执行一些评估，这可以按预期工作，但是如果父对象的某些属性是，我需要取消放置操作true - 特别是与auth相关的属性。

如何从drop:中取消放弃操作，或者让accept:访问父项和子项以在那里执行评估？

Answer 1

在设计viewmodel与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" : "*");
    }
};

Answer 2

使用此：

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

它会接受您的弃牌，如果您想取消它，请在其中使用return false。

Jquery droppable with knockout - 如何从“drop”中取消？

2 个答案: