jQuery drag and drop-проверка капли вне droppable

Я вижу, что вы уже получили ответ; во всяком случае, у меня была эта же проблема сегодня, и я решил ее так:

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

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

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

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

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

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

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

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

EDIT 3: пример из EDIT 2 имеет ошибку. Если я тащу "тащи меня!"к нижней droppable, затем падение" перетащите меня тоже "к верхней droppable, а затем падение" перетащите меня тоже "снаружи, он предупреждает" упал внутрь!"Итак, не используйте он.

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

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

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

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

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

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

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

Примечание: вам нужно вернуть правильное значение bool от этого revert-функция, по порядку сказать помощнику вернуться или нет (true/false). True означает "да", верните помощника к его оригиналу положение, перемещая его назад в замедленном темпе (из коробки). Ложь означает "нет", просто удалить вспомогательные abdruptly. Установка свойства revert в значение "invalid", ярлык сказать

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

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

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

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

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 в функции revert и просто удалить помощника во время события stop, в зависимости от значения данных('dropped') с помощью пользовательского интерфейса.помощник.снимать.)( Или вы даже можете взорвать его с помощью 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');
    }
  }
});