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

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

        }
    });

所以我接受任何带有 or 的 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对象，因此我可以执行一些评估，这可以按预期工作，但是如果父对象的某些属性为真，我需要取消删除操作 - 特别是与身份验证相关的属性。

如何从 inside 取消 drop 操作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 droppable with knockout - 如何从“drop”中取消？

2 回答 2

Related

Reference