jQuery拖放-检查拖放对象外部的拖放

Question

很抱歉，如果这个问题在另一个问题中得到了回答，我找不到针对我的问题的具体答案！

我正在尝试测试一个jQuery可拖动对象是否被拖出了一个合法的可拖放对象。这通常可以通过恢复draggable来解决90%的问题，但我不想这么做。相反，我想做一件事，如果可拖放的东西被放到一个droppable上(工作得很好！)，如果它被放在所有可能的droppable之外，我想做另一件事(目前正在战胜我！)。

简而言之：

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

我觉得我错过了一些真正的obvious...thanks提前寻求帮助！

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

我需要它，因为我不能改变我的拖拽工具的选项，所以我只能使用拖拽工具(我需要它在非常棒的FullCalendar插件中)。我认为使用droppables的“贪婪”选项可能会有一些问题，但它在大多数情况下都应该可以工作。

附言:很抱歉我的英语不好。

编辑：按照建议，我使用jQuery.data创建了这个版本；它可以在以下位置找到：jsfiddle.net/Polmonite/WZma9/

无论如何，jQuery.data文档说：

请注意，此方法目前不提供对在XML文档上设置数据的跨平台支持，因为Internet Explorer不允许通过扩展属性附加数据。

(这意味着它不能在IE 8之前的版本上工作)

EDIT 2:正如@Darin Peterson所指出的，前面的代码不能与多个拖放区域一起工作；这应该可以解决这个问题：http://jsfiddle.net/Polmonite/XJCmM/

EDIT 3: EDIT 2中的 Example有一个错误。如果我拖拽“拖动我！”将"Drag me too“放到最上面的droppable，然后将"Drag me too”放到外面，它会提示“drop inside!”所以，不要使用它。

EDIT 4:正如@Aleksey Gor所指出的，Edit2中的示例是错误的；实际上，它更多的是一个示例来解释如何循环遍历所有的draggables/droppables，但我实际上忘记了删除警告消息，所以它非常令人困惑。Here 更新后的小提琴。

Answer 3

尝试使用droppable元素的事件输出“out”。

这是documentation

“当接受的可拖动对象被拖出(在其允许范围内)时，将触发此事件。”如果我是对的，这就是你需要的。

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