Как предотвратить клонирование элемента jQuery при перетаскивании?
Я дизайнер, который является относительно новым для jQuery, поэтому, пожалуйста, потерпите меня!
Я собрал программу для создания запросов к базе данных на основе модели корзины для покупок jQuery.
По сути, пользователь перетаскивает имена полей и логические операторы в область "корзины" и удаляет их, создавая тем самым список элементов, которые можно преобразовать в строку через запятую и сохранить как запрос. Перетаскиваемый элемент на самом деле является клоном оригинала.
Основная последовательность элементов в области тележки:
field name, boolean, constant or field name, optional and/or, etc.
так что вы можете получить строку вроде этой:
product,equals,hardcoverbook,and,pubdate,lessthan,12/31/13
что так же, как:
Product = HardcoverBook AND PubDate < 123113
Чтобы сохранить логическую последовательность в области создания запроса, все поля, как правило, отключаются после удаления поля, тем самым ограничивая пользователя перетаскиванием оператора; и все логические операторы отключаются после удаления логического оператора. В противном случае вы можете получить бессмысленный запрос, например:
has,greaterthan,hardcoverbook,newspaper
Когда поле или оператор отбрасывается, его можно удалить, перетащив его в корзину.
В то же время предыдущий элемент больше не должен быть удаляемым - в противном случае пользователь может нанести ущерб выполнению запроса путем случайного удаления элементов.
Например, где "el" - это имя поля, которое перетаскивается и удаляется, класс "удаляемый" добавляется к нему как часть функции удаления и удаляется из предыдущего элемента списка:
$(el).addClass("deletable").prev('li').removeClass("deletable");
Эта часть работает нормально, то есть последний удаленный элемент списка может быть удален, а предыдущие элементы списка не могут быть удалены.
У меня проблема в том, что, если пользователь перетаскивает элемент списка, который был отброшен в область создания запроса ["корзину"], создается клон этого элемента списка. Затем этот клон можно перетащить, создав тем самым еще один клон.
Поскольку исходное событие удаления добавляет запятую после имени или оператора удаленного поля [чтобы получить строку, разделенную запятыми], я думаю, что перетаскивание удаленного поля воссоздает исходное событие удаления? Вы можете видеть это, потому что к каждому клону добавляется запятая каждый раз, когда перетаскивание останавливается.
Я могу остановить клонирование отброшенных элементов при их перетаскивании, если я делаю div "cart" не сортируемым, но тогда я не могу перетащить их в корзину:
$("#cartInv ol").droppable({
accept: "(#catalogProd2 li,#boolean li,#and_or li,#constant li)",
accept: ":not(#catalogInv li,#catalogProd2 li,#catalogRB1 li,#catalogRB2 li)"
}
).sortable("disable");
Итак - извините за мою многословность - чтобы подвести итог, мне нужна помощь в предотвращении клонирования отброшенного элемента при его перетаскивании, сохраняя при этом его "удаляемый", чтобы его можно было перетащить в корзину.
У меня есть полная рабочая версия страницы, которая показывает проблему клонирования:
На второй странице показано поведение, когда "корзина" не сортируется - элемент нельзя перетаскивать и, следовательно, не клонировать, но также нельзя перетаскивать в корзину:
Любая помощь высоко ценится!