jQuery 拖放 - 检查可放置对象外的放置 [英] jQuery drag and drop - checking for a drop outside a droppable

问题描述

如果在另一个问题中回答了这个问题，我很抱歉，我找不到特定于我的问题的答案！

My apologies if this was answered in another question, I could not find an answer specific to my problem!

我正在尝试测试 jQuery 可拖动对象是否被放置在合法可放置对象之外.这通常可以通过恢复可拖动来解决 90% 的时间，但我不想这样做.相反，如果将可拖动对象放到可放置对象上(效果很好！)，我想做一件事，如果将其放置在所有可能的可放置对象之外(目前让我变得更好！)，我想做另一件事.

I'm trying to test whether a jQuery draggable is being dropped outside of a legal droppable. This would normally be solved 90% of the time by reverting the draggable, but I don't want to do that. Instead, I want to do one thing if the draggable is dropped onto a droppable (working great!), and something else if it is dropped outside of all possible droppables (currently getting the better of me!).

简而言之:

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

我觉得我遗漏了一些非常明显的东西...在此先感谢您的帮助！

I feel like I'm missing something really obvious...thanks in advance for any help!

推荐答案

因为 droppable 的 drop 事件在draggable 的 stop 事件之前触发，我认为你可以在 drop 事件中被拖动的元素上设置一个标志，如下所示:

Because the droppable's drop event fires before the draggable's stop event, I think you can set a flag on the element being dragged in the drop event like so:

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

这篇关于jQuery 拖放 - 检查可放置对象外的放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！