jquery - Jquery UI - 允许 droppable 具有可阻止的 div

Question

我不确定如何实现我想要做的事情。我在这里设置了一个例子：

http://jsfiddle.net/zs6US/

$('.draggable').draggable({
    revert: 'invalid'
});
$('#droppable').droppable({
    accept: '.draggable'
});

绿色框是一个有效的 droppable。红框不是。如果将可拖动对象放在红色上，即使是绿色上方的红色，我也希望它无效并恢复。在示例中，这不起作用。

这是可以实现的吗？我已经梳理了 API 和其他问题，但无法找到答案。

Answer 1

可能是一种解决方法：

http://jsfiddle.net/zs6US/4/show

http://jsfiddle.net/zs6US/4/

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable').droppable({
    accept: '.draggable',
    drop: function (e, ui) {
        ui.draggable.hide();
        console.log(ui);
        var target = document.elementFromPoint(ui.offset.left, ui.offset.top);
        if (!target || target.id != "droppable") ui.draggable.draggable({
            revert: true
        });
        else  ui.draggable.draggable({
            revert: false
        });
        ui.draggable.show();
        }
    });

Answer 2

接受的解决方案更清洁，但有 1 个问题。一旦将可拖动对象拖放到绿色区域上，即使在白色区域上也将变为可拖放对象...（注意revert: false）使用正确代码更新该答案。

演示2

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if(!ui.draggable.data('original')){
            ui.draggable.data('original',ui.draggable.draggable("option", "revert"));
        }
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: ui.draggable.data('original')  });
        }
    }
});

---

看起来这个问题已经有了答案。但这是我解决同样问题的尝试。

演示

$('#block').droppable({
    accept: '.draggable',
    drop: function (event, ui) {
        if (ui.draggable.data('revert')) {
            ui.draggable.data('revert', false);
            var old = ui.draggable.draggable("option", "revert");
            ui.draggable.draggable("option", "revert", true);
            setTimeout(function () {
               ui.draggable.draggable("option", "revert", old);
            }, 100);
        }
    },
    out: function (event) {
        $('.draggable').data('revert', false);
    },
    over: function (event,ui) {
       ui.draggable.data('revert', true);
    }
});

$('#droppable').droppable({
    accept: function (elem) {
      if ($('.draggable').data('revert')) {
            return false;
        }
        return elem.hasClass("draggable");
    }
});

$('.draggable').draggable({
    revert: 'invalid'
});

Answer 3

只需将两个元素都添加到可放置类型中，然后检查已放置它的元素。如果是block则还原。

http://jsfiddle.net/zs6US/12/

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: "invalid"});
        }
    }
});