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：来自EDIT 2的示例有一个错误。如果我拖动“拖我！”到底部的droppable，然后将“拖我也”放到上面的droppable然后在外面放下“Drag me too”，它会警告“Dropped inside！”所以，不要使用它。

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

Answer 3

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

这是documentation

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

还可以在整个页面上创建元素叠加层。如果元素被丢弃，那么你就可以激活你的事件。不是最好的，但我认为这是唯一的方法。因为您需要一些其他“可放置”项来触发这些事件。

Answer 4

以下示例的优点是您无需更改或了解可放置代码：

可拖动的revert属性可以具有函数（值）{}。值作为参数传递，指示辅助函数是否被放置到元素（drop元素）上，如果没有放在元素上，则返回“false”（放在外面或不被接受）。

注意：您需要从中返回正确的bool值   恢复功能，以告诉帮助者还原   （真假）。 True表示是，将帮助程序恢复原状   通过慢速移动（开箱即用）的位置。虚假意味着不，只是   abdruptly删除助手。将revert属性设置为'invalid'，   是说
的捷径

'是的，如果掉到外面，那就还原帮手'

'不，如果放在可放置的元素上并接受，则立即杀死帮助者'。

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

可拖动的事件/函数调用顺序：启动复归停止

这可能就是一个例子：

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（）的数据（'dropped'）值。或者如果你还有糟糕的一天，你甚至可以使用CSS3将其爆炸;）

Answer 5

我添加了我采用的解决方案，因为您可以从正在移动的对象的css类中轻松理解这一点：

    private void searchpersonbx_TextChanged(object sender, TextChangedEventArgs e)
    {

    }

Answer 6

旧问题和旧答案意味着“可能”是一个新解决方案。正如问题所指出的那样，您（也许）还想知道是否将可拖动对象放到了可放置对象之外。对我来说，至少在95％的情况下，我并不在乎IF，我只是希望事情回到原来的样子，而不会在发生这种情况时进行任何更改。

将revert设置为字符串invalid可以实现所需的行为，而无需执行任何额外的代码或时髦的事情。

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

同样，它不会告诉您“是否已将其放置在可放置对象之外”，但是如果发生这种情况，它将恢复为初始状态。

jQuery拖放 - 检查droppable外部的drop

6 个答案: