Jquery droppable принять

Ответ 1

Если вы хотите, чтобы droppable принимал несколько элементов, вы можете сделать что-то вроде этого:

$(".droppable").droppable({
    accept: function(d) { 
        if(d.hasClass("foo")||(d.attr("id")=="bar")){ 
            return true;
        }
    }
});

Этот droppable будет принимать элементы с классом "foo" или элементом с идентификатором "bar"

Ответ 2

Если я правильно понял ваш вопрос, вы хотите условно принять сброшенный элемент на основе пользовательского кода. Ответ Aberon - типичный случай: вы хотите разрешить только некоторые перетаскиваемые опции на основе их класса, а все остальные будут возвращены. Если это ответит на ваш вопрос, то хорошо.

Тем не менее, есть случай, когда реверсивная анимация происходит условно на основе чего-то более сложного, чем совпадение класса. В моем собственном проекте я использую drag-drop для добавления пользователей в группу. Если утерянный пользователь уже находится в группе, я хочу, чтобы элемент вспомогательного пользователя возвращался обратно. В противном случае я продолжу действие AJAX, чтобы вставить их. Это не заменяет проверку на заднем плане, но это приятная визуальная обратная связь.

Я посмотрел в другом месте для простого ответа на этот вопрос. Обратите внимание на поддерживающие JQuery: для меня самым простым способом было бы добавить некоторое свойство объекта события в функцию drop, например:

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            // add child here
        } else {
            event.revert = true;
        }
    }
});

К сожалению, это не сработает. Здесь то, что "работает", тем не менее: установите перетаскиваемый элемент, чтобы он всегда возвращался, а затем скрыл помощника, если условие выполнено. Вы можете получить ссылку на помощника, ища единственный элемент на странице с классом ".ui-draggable-dragging". Вот пример, замените "isDropOK()" своей логикой:

$('.valid').draggable({
    revert: true,
    helper: 'clone',
    opacity: 0.5
});

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            $('.ui-draggable-dragging').hide();
            // add child here
        }
    }
});

Итак, чтобы повторить, каждый элемент будет всегда возвращаться, если вы не нажмете на событие drop и не скроете помощника вручную. Реверсивная анимация все равно произойдет, но ваши пользователи ее не увидят. Это немного взломать, но конечный результат, похоже, все в порядке.

Ответ 3

В соответствии с документация JQuery для селекторов.

Все перетаскиваемые элементы, соответствующие селектору будут приняты. Если функция указанный, функция будет вызываться для каждого перетаскиваемого на страницу (пройденного как первый аргумент функция), чтобы обеспечить пользовательский фильтр. Функция должна возвращать значение true, если draggable должен быть принят.

Таким образом,

$('.selector').droppable({ accept: '.special' }); 

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

Ответ 4

Это решение, которое я использую:

... accept: '#diva,#divb', ...

Ответ 5

Я выяснил решение, основанное на условии, что draggable не должен быть помещен в droppable, уже занятый другим draggable:

$(".placement").droppable({
    accept: function(elm) {
        // only allow draggables to the placement if there no other draggable 
        // in the droppable
        if (!$(this).attr('isbusy'))
            return true;
    },
    drop: function(event, ui) {
        $(this).attr('isbusy', 'yeap'); // fill key with something

        var draggable = $(ui.draggable[0]);
        // free the draggable previous droppable 
        if (draggable.attr('droppable')) {
            $('#' + draggable.attr('droppable')).attr('isbusy', '');
        }

        // save the new draggable droppable
        draggable.attr('droppable', $(this).attr('id'));
    },
});

Ответ 6

В дополнение к Alex answer, который является лучшим ответом, который я нашел по этому вопросу, мне нравится добавлять, что если вы хотите проверить соответствие атрибутов между droppable и draggable, вы можете использовать ключевое слово this для доступа к droppable в вашей функции accept. Вот небольшой пример, который я недавно использовал:

accept : function (draggable) {
  var id_group_drop, id_group_drag;

  //get the "id_group" stored in a data-attribute of the draggable
  id_group_drag = $(draggable).attr("data-id-group");

  //get the "id_group" stored in a data-attribute of the droppable
  id_group_drop = $(this).parent().attr("data-id-group");

  //compare the id_groups, return true if they match or false otherwise
  return id_group_drop == id_group_drag;
}

Итак, draggable принимается только тогда, когда id_group (помните, только пример) соответствует id_group droppable, иначе draggable будет возвращен. Я думаю, что это может быть очень распространенный случай использования, возможно, это поможет кому-то.

Ответ 7

Вместо использования класса в качестве accept вы можете просто использовать функцию типа и верните true, если оно соответствует вашим критериям.

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});

Ответ 8

Это мое решение:

var foo = true;

$( ".draggable" ).draggable({ 
                        revert: function(){if(foo == true){return true;}else{foo = true;}},
                         });

    $("#droppable").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            if($this == $that){
                foo = true;
                alert("this will revert the draggable back to original position");
            }else{
                foo = false;
                alert("this will NOT revert the draggable back to original position");
            }
        }
    });