jQuery拖放 - 检查droppable外部的drop

Question

如果在另一个问题中回答这个问题,我很抱歉,我无法找到特定于我的问题的答案!

我正在尝试测试jQuery draggable是否被放弃在合法的dropable之外.这通常会在90%的时间内通过恢复可拖动来解决,但我不想这样做.相反,我想做一件事,如果draggable被放到droppable(工作得很好!),以及其他东西,如果它被丢弃到所有可能的droppables之外(目前让我变得更好!).

简而言之:

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

我觉得我错过了一些非常明显的东西...提前感谢任何帮助!

Answer 1

因为droppable的drop事件在draggable的stop事件之前触发,我认为你可以在drop事件中设置一个标记,如下所示:

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        ui.helper.data('dropped', true);
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    start: function(event, ui) {
        ui.helper.data('dropped', false);
    },
    stop: function(event, ui)
    {
        alert('stop: dropped=' + ui.helper.data('dropped'));
        // Check value of ui.helper.data('dropped') and handle accordingly...
    }
});

Answer 2

我看到你已经得到了答案; 无论如何我今天遇到同样的问题,我这样解决了:

var outside = 0;

// this one control if the draggable is outside the droppable area
$('#droppable').droppable({
    accept      : '.draggable',
    out         : function(){
        outside = 1;
    },
    over        : function(){
        outside = 0;
    }
});

// this one control if the draggable is dropped
$('body').droppable({
    accept      : '.draggable',
    drop        : function(event, ui){
        if(outside == 1){
            alert('Dropped outside!');
        }else{
            alert('Dropped inside!');
        }
    }
});

我需要它,因为我无法更改我的draggables的选项,所以我只能使用droppables(我需要在真棒的FullCalendar插件中).我想使用droppables的"贪婪"选项可能会遇到一些问题,但在大多数情况下都应该可以使用.

PS:抱歉我的英语不好.

编辑:按照建议,我使用jQuery.data创建了版本; 它可以在这里找到:jsfiddle.net/Polmonite/WZma9/

无论如何jQuery.data文档说:

请注意,此方法目前不提供跨XML平台支持,因为Internet Explorer不允许通过expando属性附加数据.

(意思是它在8之前的IE上不起作用)

编辑2:如@Darin Peterson所述,之前的代码不适用于多个丢弃区域; 这应该解决这个问题:http://jsfiddle.net/Polmonite/XJCmM/

编辑3:编辑2的示例有一个错误.如果我拖动"拖我!" 到底部可放置,然后将"拖我也"放到上面的droppable然后在外面放下"拖我",它会警告"掉进去!" 所以,不要使用它.

编辑4:如@Aleksey Gor所述,编辑2中的例子是错误的; 实际上,它更像是一个例子来解释如何循环遍历所有draggables/droppables,但我实际上忘了删除警报消息,所以这很令人困惑.这里更新了小提琴.

Answer 3

尝试使用可放置元素的“out”事件。

这是文档

“当接受的可拖动对象被拖出（在其容差范围内）此可放置对象时，会触发此事件。” 如果我是对的，这就是你所需要的。

还可以在整个页面上创建一个元素覆盖。如果该元素被放置在那里，您就会触发您的事件。不是最好的，但我认为是唯一的方法。因为您需要一些其他“可放置”项目来触发这些事件。