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

【问题标题】：Jquery UI - Allow droppable to have blockable divJquery UI - 允许 droppable 具有可阻止的 div
【发布时间】：2013-05-30 17:04:28
【问题描述】：

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

http://jsfiddle.net/zs6US/

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

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

只需将这两个元素都添加到可放置类型中，然后检查已放置它的元素。如果是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"});
        }
    }
});

【讨论】：

啊，是的，这正是我所需要的。感谢您的帮助。
虽然这是公认的答案@user2437462，但此解决方案存在问题。一旦你把它放在绿色盒子上，那么它也可以放在白色区域......因为你正在制作revert: false ..看到我的naswer它已经解决了这个问题
@rahulmaindargi 谢谢，我错过了。代码比您发布的要简单得多，设置 revert: "invalid" 而不是 false （以匹配原始声明）。上面的代码更新了
@jammykam 如果revert 很简单，就像'revert: "invalid"' 那么没关系，但是如果它的anonymus function 或其他什么......？我的回答也会解决这个问题..因为我将原始值存储一次......并使用它..
感谢您指出该问题并修复它。正确的是，我只是使用“无效”，所以这个解决方案对我有用，但如果将来发生变化，这个讨论会很有帮助。

【解决方案2】：

可能是一种解决方法：

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

【讨论】：

经过测试，这是有问题的，但我希望能给你带来正确的方式
谢谢，这是在正确的轨道上。不过，jammykam 的答案更简洁、更容易。

【解决方案3】：

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

DEMO2

$('.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')  });
        }
    }
});

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

DEMO

$('#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'
});

【讨论】：