A drop zone is inside another drop zone. jQuery UI Droppable?

Question

JavaScript

There is a hierarchical list of product categories:


It is quite logical that it is inserted into the page markup through an unordered list <UL>-<LI> . The most important point is that each element of the list is "dragable" (drag) , and can also take on dragged elements (droppable) - in this way the elements are reordered. To enable these features, the jQuery UI Draggable , jQuery UI Droppable plugins are used , and the jQuery library itself.


How are "sublists" - subgroups - arranged in the markup?

Initially, I did not format the markup in accordance with the W3C standards, namely: the subcategories lay outside the parent <LI> element . Those. The list shown in the screenshot was designed in this way*:

<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>

* - hereinafter, I omitted such elements as link tags, checkboxes, class attributes, because they are not related to the essence of the problem under consideration.

And everything seemed to work fine (I mean drag & drop), but then all sorts of radishes ran up and started to reproach me that you can’t do this, it’s not by standards.
Okay, I changed the markup of the list to this:

<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>

As you can see, now the list of each subcategory lies inside the parent list element <LI> .
This is where it all broke down. Now dropping any element on one of the subcategories (of any level) did not work, because the child element's drop zone was completely inside the drop zone of the main parent element, so the "drop" event fired on it.
In other words, if you try to drop any category on the "toshiba" subcategory, the "drop" event will fire on the "electronics" category, not "toshiba".

Is there any way out of this problem or will I have to return to non-standard layout? You don’t need to mention ready-made plugins like jsTree - I already know about them.

Answer 1

www.w3.org/TR/html401/struct/lists.html#edef-LI Tell your "radishes" that they are bad people, ul or ol should not be put in li, li is a text node. The proof of this is at least that the closing tag is not required, it does not participate in the structure, it only frames the text.

Answer 2

And what's the problem with making everything li droppable and regulating the transfer through the hierarchy through return false;?