Javascript jQuery拖放-检查可拖放外部的拖放

抱歉，如果这是在另一个问题中回答的，我找不到针对我的问题的答案

我试图测试jQuery draggable是否被丢弃在合法的dropable之外。通常情况下，90%的时间都可以通过恢复draggable来解决这个问题，但我不想这样做。相反，我想做一件事，如果拖放到一个可拖放设备上（工作得很好！），如果它被放到所有可能的可拖放设备之外（目前我做得更好！）

简言之：

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

---

我觉得我错过了一些非常明显的东西…提前谢谢你的帮助

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

这是

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

---

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

因为Dropable的drop事件在Dragable的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...
    }
});

---

我看你已经得到了答案；不管怎样，我今天遇到了同样的问题，我这样解决了它：

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（我需要在很棒的插件中使用它）。 我想使用droppables的“贪婪”选项可能会有一些问题，但在大多数情况下它应该可以工作

PS：对不起，我的英语不好

编辑：根据建议，我使用jQuery.data创建了该版本；可以在这里找到：

不管怎样，jQuery.data文档说：

请注意，由于Internet Explorer不允许通过expando属性附加数据，因此此方法目前不提供跨平台的XML文档数据设置支持

（意味着它不适用于8之前的IE）

编辑2:正如@Darin Peterson所指出的，前面的代码不适用于多个放置区域；这应该可以解决这个问题：

编辑3:编辑2的示例有一个bug。如果我将“drag me！”拖到底部可下拉列表中，然后将“drag me to”拖到上部可下拉列表中，然后将“drag me to”拖到外部，它会提示“drag me to！”因此，不要使用它

---

编辑4:正如@Aleksey Gor所指出的，编辑2中的示例是错误的；事实上，这更像是一个例子，解释了如何循环遍历所有的draggables/droppables，但我实际上忘记了删除警报消息，所以它非常混乱。更新的小提琴。

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

可拖动还原属性可以有一个函数（值）{}。一个值作为参数传递，指示是否将helper拖放到元素（拖放元素）上，或者如果未拖放到元素（拖放到外部或不接受）上，则为“false”

注意：您需要从中返回正确的布尔值 revert函数，用于告诉助手是否恢复 （对/错）。True表示是，将帮助程序恢复到其原始状态 通过慢动作（开箱即用）将其向后移动来定位。False的意思是不，只是 将辅助件向外卸下。将revert属性设置为“无效”， 这是说话的捷径

• '是，如果在外部放置，则还原帮助程序'
• '否，如果在可拖放元素上拖放并被接受，则立即杀死助手'

我的猜测是，您可以在启动事件期间将当前ui帮助程序添加到具有数据属性的可拖动容器中。然后在revert函数中从data属性中选取它。然后向辅助对象添加属性，指示是否已删除该属性。最后，在停止事件中，检查此数据属性值，并执行您想要的操作

可拖动的事件/函数调用顺序： 开始-恢复-停止

这可以是一个例子：

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（）中的数据（'droped'）值。或者，如果你今天仍然过得不好，你甚至可以用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
    }
});

---

同样，它不会告诉你“如果它是从一个可下拉列表中删除的”，但如果发生这种情况，它会恢复到初始状态。

嘿，ggzone，感谢您的快速响应……如果我正在拖动的可拖放列表是从一个有效的可下拉列表中删除的，那就太完美了。如果一个可拖动设备被从其原始位置拖动，然后随机地扔到远离合法可拖动设备的某个地方，那么据我所知，这个事件永远不会被触发！真棒，谢谢你…就像你说的，可能不是最好的，如果你还没有看到Luke提供的答案，我认为它提供了一个更优雅的解决方案，具有相同的结果！非常非常酷的解决方案，卢克，谢谢你…效果非常好！令人惊讶的是：是否有关于.data的文档？对我来说，它有点像是从天上降下来的：3（读：找不到更多信息）不应该

ui.draggable