JQuery UI Drag / Droppable с несколькими областями?

Я хочу иметь несколько классов draggable, каждый из которых соответствует классу droppables. Но, кроме того, я хочу иметь отдельную «мусорную корзину», в которой можно сбрасывать все перетаскиваемые предметы до тех пор, пока для них не будет найдена подходящая откидная крышка.

Теперь это может быть легко достигнуто с помощью функции принятия. Тем не менее, у меня может быть до 20 классов, каждый с 30-40 draggables / droppables. Поэтому, если я использую & quot; принять & quot; Функция для этого, в момент, когда я выбираю перетаскиваемый, мой хром зависает, поскольку он запускает тесты для каждого сбрасываемого на экране :(

Это может быть решено, если я использую «область действия» свойство, так как он, кажется, использует какой-то другой способ. Однако, когда я использую область действия, я не могу реализовать «мусорное ведро». концепция, так как она может иметь только одну область применения!

Есть ли способ обойти эту проблему? Предоставить draggable больше, чем одну область, или дать мусорную корзину много областей? Или, может быть, какое-то другое решение, о котором я не могу думать?

 chrisvillanueva17 июн. 2012 г., 00:31
Привет. Можете ли вы опубликовать некоторый код, чтобы мы могли видеть, что у вас есть?

Ответы на вопрос(1)

Решение Вопроса

Внутренний интерфейс jQuery будет запускать следующий код при каждом перетаскиванииdraggable определить, какойdroppableы имеют право на получениеdraggable.

var m = $.ui.ddmanager.droppables[t.options.scope] || [];
var type = event ? event.type : null; // workaround for #2317
var list = (t.currentItem || t.element).find(":data(droppable)").andSelf();

droppablesLoop: for (var i = 0; i < m.length; i++) {

    if(m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0],(t.currentItem || t.element)))) continue;   //No disabled and non-accepted
    for (var j=0; j < list.length; j++) { if(list[j] == m[i].element[0]) { m[i].proportions.height = 0; continue droppablesLoop; } }; //Filter out elements in the current dragged item
    m[i].visible = m[i].element.css("display") != "none"; if(!m[i].visible) continue;                                   //If the element is not visible, continue

    if(type == "mousedown") m[i]._activate.call(m[i], event); //Activate the droppable if used directly from draggables

    m[i].offset = m[i].element.offset();
    m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight };

}

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

Стоит отметить, что самая первая вещь, проверенная вdroppablesLoop является лиdroppable выключен.

Поэтому для повышения производительности вы всегда можете вручную отключить соответствующиеdroppable виджеты, которые заставят вас быстро выпрыгнуть из блока кода выше. Вы можете сделать это с помощьюstart событие наdraggable, который будет стрелять первым.

$('.draggable').draggable({
    start: function() {
        $('.invalid-droppable-elements').droppable('option', 'disabled', true);
    },
    stop: function() {
        $('.invalid-droppable-elements').droppable('option', 'disabled', false);
    }
});

Это по сути заставляет вас реализоватьaccept / scope Логика себя и влияние на производительность зависит от вашего алгоритма. Это не должно быть так плохо для реализации, хотя. Причина, по которой плагины настолько медленны, насколько они есть, заключается в том, что они должны обрабатывать множество различных ситуаций.

Пользовательский интерфейс jQuery не поддерживает добавление нескольких областей к отдельнымdraggable / droppable элементы, но вы можете свернуть эту функциональность по своему усмотрению.

Я собрал пример, чтобы показать это здесь -http://jsfiddle.net/tj_vantoll/TgQTP/1/.

 Gilthans17 июн. 2012 г., 20:11
Это на самом деле оказало хорошее влияние на производительность, но все еще очень мало, в отличие от использования области действия. У меня фактически были отключены все параметры сброса, кроме корзины, и включены только те, которые мне нужны. Разве нет способа заставить что-то принадлежать более чем одной области?
 18 июн. 2012 г., 03:58
Я отредактировал свой ответ, чтобы ответить на ваш вопрос. Краткий ответ: никакой пользовательский интерфейс jQuery не поддерживает несколько областей, но это довольно легко реализовать самостоятельно.
 26 апр. 2014 г., 20:37
Это замечательно, но для тех, кто интересуется, кажется, есть немного больше "сложности" с.each, Если я что-то упустил, вы можете просто сослаться$('.draggable') и перенести назначениеvar scope вstart

Ваш ответ на вопрос