Есть иерархический список категорий товара:
Вполне логично, что в разметку страницы он вставлен через ненумерованный список
<UL>-<LI>. Самый важный момент заключается в том, что каждый элемент списка является
«перетаскиваемым» (drag), а также может принимать на себя перетаскиваемые элементы
(droppable) — таким способом осуществляется переупорядочивание элементов. Для задействования этих возможностей используются плагины
jQuery UI Draggable,
jQuery UI Droppable, ну и собственно сама библиотека jQuery.
Как оформлены в разметке «подсписки» — подгруппы?
Изначально я оформлял разметку не в соответствии со стандартнами W3C, а именно: подкатегории лежали вне родительского элемента
<LI>. Т.е. указанный на скриншоте список был оформлен таким образом*:
<ul><br>
<li>электроника</li><br>
<ul><br>
<li>телевизоры</li><br>
<ul><br>
<li>toshiba</li><br>
</ul><br>
</ul><br>
<li>DVD-плееры</li><br>
<li>MP3-плееры</li><br>
</ul><br>
* — здесь и далее я опустил такие элементы как теги ссылок, чекбоксов, атрибуты классов, поскольку они не имеют отношения к сути рассматриваемой проблемы
И всё казалось бы прекрасно работало (я имею ввиду drag & drop), но тут набежали всякие редиски и начали укорять меня в том, что так делать нельзя, это не по стандартам.
Окей, переделал разметку списка на такую:
<ul><br>
<li>электроника<br>
<ul><br>
<li>телевизоры<br>
<ul><br>
<li>toshiba</li><br>
</ul></li><br>
</ul></li><br>
<li>DVD-плееры</li><br>
<li>MP3-плееры</li><br>
</ul><br>
Как видите, теперь список кажой подкатегории лежит внутри родительского элемента списка
<LI>.
Вот тут-то всё и поломалось. Теперь бросание какого-либо элемента на одну из подкатегорий (любого уровня) не срабатывало, потому что drop-зона дочернего элемента полностью входила в drop-зону самого главного родительского элемента, поэтому событие
«drop» срабатывало именно на нём.
Иными словами, если попробовать бросить любую категорию на подкатегорию «toshiba», то событие
«drop» сработает на категории «электроника», а не «toshiba».
Есть какой-нибудь выход из этой проблемы или придётся вернуться к вёрстке не по стандартам? Про готовые плагины вроде jsTree можете не напоминать — я и так о них знаю.
