JQuery DropPable принять

Question

Может ли кто-нибудь сказать мне, как я могу написать функцию в состоянии принятия, а затем, как она узнает, что принимать, а что не принимать. Например, я хочу принять div a и div b в состоянии принятия. Как я могу написать мне через функцию?

Answer 1

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

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

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

Answer 2

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

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

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

$('.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 и не скроете помощника вручную. Возвратная анимация все равно будет происходить, но ваши пользователи ее не увидят. Это немного взломать, но конечный результат, кажется, работает хорошо.

Answer 3

Согласно документации Jquery для селекторов .

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

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

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

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

Answer 4

В дополнение к 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 будет отменено. Я думаю, что это может быть очень распространенным вариантом использования, может быть, это кому-то поможет.

Answer 5

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

$(".placement").droppable({
    accept: function(elm) {
        // only allow draggables to the placement if there's 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's previous droppable 
        if (draggable.attr('droppable')) {
            $('#' + draggable.attr('droppable')).attr('isbusy', '');
        }

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

Answer 6

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

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

Answer 7

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

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

Answer 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");
            }
        }
    });