jQuery拖放-检查可拖放对象之外的拖放

由于可拖放事件在可拖放停止事件之前触发，我认为您可以在拖放事件中为被拖放的元素设置一个标志，如下所示:

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

我知道你已经得到了答案;不管怎样，我今天遇到了同样的问题，我是这样解决的:

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!');
        }
    }
});

我需要这个，因为我不能改变我的拖拽选项，所以我不得不只与拖拽一起工作(我需要它在awesome FullCalendar插件中)。我想它可能会有一些问题，使用"贪婪"选项的水滴，但它应该在大多数情况下工作。

PS:对不起，我的英语不好。

EDIT:按照建议，我使用jQuery.data;可以在这里找到:jsfiddle.net/Polmonite/WZma9/

jQuery。数据文档说:

注意，这个方法目前不提供跨平台的支持来设置XML文档上的数据，因为Internet Explorer不允许通过expando属性附加数据。

(意思是它不能在IE 8之前工作)

EDIT 2:正如@Darin Peterson所指出的，前面的代码不能使用多个下拉区域;这应该可以解决这个问题:http://jsfiddle.net/Polmonite/XJCmM/

EDIT 3: EDIT 2中的示例有一个错误。如果我把"drag me!"拖到最下面，然后把"drag me too"拖到最上面，然后再把"drag me too"拖到外面，它就会提示"掉落在里面!"所以，不要用它。

EDIT 4: @Aleksey Gor指出，EDIT 2中的例子是错误的;实际上，它更像是一个解释如何循环遍历所有可拖放/可放物品的例子，但我实际上忘记删除警告消息，所以它非常令人困惑。这是更新后的小提琴。

尝试使用可放置元素的事件"out"

这是文档

"当一个可拖放对象被拖出(在可拖放对象的允许范围内)时触发此事件。"如果我是对的，这就是你需要的。

也可以在整个页面上创建一个元素叠加。如果元素被放置在那里，则触发事件。不是最好的，但我认为是唯一的办法。因为您需要一些其他"可掉落"的项目来触发这些事件。

以下示例的优点是，您不需要更改或了解可放代码:

draggable revert属性可以有一个函数(value){}。一个值作为参数传递，指示helper是否被丢弃到一个元素上(丢弃元素)，如果没有被丢弃到一个元素上(掉落到外部或不被接受)，则为false。

注意:您需要从中返回正确的bool值函数，用于告诉帮助器是否进行恢复(真/假)。True表示yes，将helper恢复到原来的状态定位，通过移动它在一个慢动作(开箱即用)。假的意思是没有，只是突然将助手移走。将revert属性设置为"invalid"，是

的快捷方式

• 'yes, if drop out, then revert helper'
• '不，如果在可掉落元素上掉落并被接受，则立即杀死助手'。

我的猜测是，你可以添加当前ui助手到可拖动的容器与数据属性在启动事件。然后从data属性的revert函数中取出它。然后向helper添加一个属性，指示它是否被删除。最后，在停止事件中，检查此数据属性值，并执行您想要的操作。

事件/函数调用的顺序:start-revert-stop

这可以是一个例子:

jQuery('#draggable').draggable(
{
    start: function(event, ui) {
        $(this).data('uihelper', ui.helper);
    },
    revert: function(value){
        var uiHelper = (this).data('uihelper');
        uiHelper.data('dropped', value !== false);
        if(value === false){
             return true;
        }
        return false;
    },
    stop: function(event, ui)
    {
        if(ui.helper.data('dropped') === true){
            // handle accordingly...
        }
    }
});

您甚至可以在revert函数中返回true，而只是在stop事件期间删除helper，这取决于使用ui.helper.remove()的data('dropped')值。或者你甚至可以用CSS3来爆炸，如果你仍然有糟糕的一天;)

我添加了我采用的解决方案，因为你可以很容易地从你正在移动的对象的css类中理解这一点:

jQuery('#draggable').draggable({
  stop: function(event, ui) {
    if (ui.helper.hasClass('ui-draggable-dragging')) {
      console.log('dropped out');
    } else {
      console.log('dropped successfully');
    }
  }
});

老问题和老答案意味着这"可能"是一个新的解决方案。正如问题所述，你(也许)还想知道一个可拖拽对象是否在可拖拽对象之外被拖拽。对我来说，在至少95%的情况下，我真的不在乎，我只是希望事情能回到原来的样子，而不做任何改变。

将revert设置为字符串invalid，无需任何额外的代码或怪异的事情即可完成所需的行为。

$( '#draggable' ).draggable({
    revert: "invalid",
    stop: function( event, ui )
    {
       // whatever
    }
});

同样，它不会告诉你"如果它被掉落到可掉落物之外"，但如果发生这种情况，它会恢复到初始状态。

这工作对我来说:

<script>
$( function() {
    $( "#draggable" ).draggable();
    $( ".droppable" ).droppable({
        drop: function( event, ui ) {
            if( $(this) ){
                $( "#draggable" ).draggable( "disable" );
            }                
        },
    });
} );