javascript - Dojo 拖放 "list in list"(嵌套列表)

Question

我有以下 HTML，我使用 dojo 拖放来排序属性和 将它们放到另一个部分。但是我怎样才能对部分进行排序呢？它对我不起作用，我创建的内容:

<ul accept="section" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">

  <li id="section1" class="dojoDndItem" dndtype="section">
     <ul accept="attribut" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li dndtype="attribut" id="attribut1"></li>
       <li dndtype="attribut" id="attribut2"></li>
       <li dndtype="attribut" id="attribut3"></li>
     </ul>
  </li>

  <li id="section2" class="dojoDndItem" dndtype="section">
     <ul accept="attribut" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li dndtype="attribut" id="attribut1"></li>
       <li dndtype="attribut" id="attribut2"></li>
       <li dndtype="attribut" id="attribut3"></li>
     </ul>
  </li>

</ul>

Answer 1

这是您想要做的吗:在同一个列表中将内部列表项相互移动，并从一个列表移动到另一个列表。您还想移动两个外部列表。如果是这样，试试这个:

<style>
.container {
  width: 50%;
}
</style>

<ul accept="section" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
  <li id="section1" class="dojoDndItem" dndtype="section">
     <ul accept="attribut" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li class="dojoDndItem" dndtype="attribut" id="attribut1">one</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut2">two</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut3">three</li>
     </ul>
  </li>

  <li id="section2" class="dojoDndItem" dndtype="section">
     <ul accept="attribut" data-dojo-type="dojo.dnd.Source" class="container dojoDndSource">
       <li class="dojoDndItem" dndtype="attribut" id="attribut4">four</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut5">five</li>
       <li class="dojoDndItem" dndtype="attribut" id="attribut6">six</li>
     </ul>
  </li>
</ul>

我所做的修改是:

• 修复了第二个列表中的重复 ID。
• 将“容器”类的宽度设置为小于 100%。这会给你一个地方 捕获整个列表。列表项
• 通过添加类“dojoDndItem”使您的内部列表项可拖动。