Перетаскивание jQuery - проверка на падение за пределами droppable

Поскольку событие droppable срабатывает до события остановки draggable, я думаю, вы можете установить флаг для перетаскиваемого элемента в событии 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!');
        }
    }
});

Мне это было нужно, потому что я не мог изменить параметры своих перетаскиваемых элементов, поэтому мне приходилось работать только с выпадающими элементами (мне это было нужно внутри потрясающего Плагин FullCalendar). Я предполагаю, что у него могут быть некоторые проблемы с использованием «жадного» варианта droppables, но в большинстве случаев он должен работать.

PS: извините за мой плохой английский.

EDIT: Как и было предложено, я создал версию, используя jQuery.data; его можно найти здесь: jsfiddle.net/Polmonite/WZma9/

В любом случае документация jQuery.data говорит:

Обратите внимание, что этот метод в настоящее время не обеспечивает межплатформенную поддержку для установки данных в XML-документах, поскольку Internet Explorer не позволяет прикреплять данные через свойства Expando.

(это означает, что он не работает в IE до 8)

EDIT 2: Как отметил @Darin Peterson, предыдущий код не работает с более чем одной областью перетаскивания; это должно решить эту проблему: http://jsfiddle.net/Polmonite/XJCmM/

EDIT 3: Пример из EDIT 2 содержит ошибку. Если я перетащу "Перетащите меня!" в нижний выпадающий элемент, затем перетащите «Перетащите меня тоже» в верхний выпадающий элемент, а затем перетащите «Перетащите меня тоже» наружу, он предупреждает «Выпало внутрь!» Так что не используйте его.

EDIT 4: Как заметил @Aleksey Gor, пример в Edit 2 был неправильным; на самом деле, это был скорее пример, чтобы объяснить, как перебирать все перетаскиваемые/выпадающие элементы, но я на самом деле забыл удалить предупреждающие сообщения, так что это было довольно запутанно. здесь обновленная скрипта.

Попробуйте использовать событие "out" элемента droppable.

Это документация.

«Это событие запускается, когда принятый перетаскиваемый элемент вытаскивается (в пределах допуска) этого опускаемого элемента». Если я прав, это то, что вам нужно.

Также возможно создать наложение элемента на всю страницу. Если элемент удален, вы запускаете свое событие. Не лучший, но я думаю, единственный способ сделать это. Потому что вам нужен какой-то другой «выпадающий» элемент для запуска этих событий.

Преимущество следующего примера заключается в том, что вам не нужно ничего менять или знать о удаляемом коде:

Свойство перетаскиваемого возврата может иметь функцию (значение) {}. В качестве аргумента передается значение, указывающее, был ли вспомогательный элемент переброшен на элемент (элемент перетаскивания), или «false», если не переброшен на элемент (переброшен снаружи или не принят).

Примечание: вам нужно вернуть правильное логическое значение из этой функции возврата, чтобы указать помощнику возвращаться или нет (true/false). True означает да, верните помощника в исходное положение, двигая его назад в замедленном темпе (из коробки). False означает нет, просто резко удалите помощника. Установка свойства revert на «недействительный» — это быстрый способ сказать

• 'да, если выпало наружу, то вернуть помощника'
• 'нет, если упал на выпадающий элемент и принят, то сразу убить помощника'.

Я предполагаю, что вы можете добавить текущий помощник пользовательского интерфейса в перетаскиваемый контейнер со свойством данных во время стартового события. Затем возьмите его в функции возврата из свойства данных. Затем добавьте свойство к помощнику, указав, было ли оно удалено или нет. Затем, в конце концов, в событии остановки проверьте значение этого свойства данных и сделайте то, что вы намеревались.

Порядок вызовов событий/функций для перетаскивания: старт-возврат-стоп

Это может быть примером:

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

Вы даже можете вернуть true в функции возврата и вместо этого просто удалить помощника во время события остановки, в зависимости от значения данных («отброшено») с помощью ui.helper.remove(). Или вы могли бы даже взорвать его с помощью 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
    }
});

Опять же, он не скажет вам, «если он был выброшен за пределы выпадающего», но вернется в исходное состояние, если это произойдет.