Question

我的列表结构如下：

<ul class='binder'> 
<li value='7'>Welcome
<ul class='section'> 
<li value='7'>Introduction 
<ul class='subsection'> 
<li value='4'>About Us
<ul class='node'> 
<li value='11'>2</span> 
<ul class='element'> 
<li value = '8' class='paragraph'>Test Paragraph</li></ul> 
<li value='10' id='node_10'>1
<ul class='element'> 
<li value = '7' class='ulist'>Introduction</li></ul> 
</li></ul> 
</li></ul> 
</li></ul> 
<li value='8'>Health and Safety
<ul class='section'> 
<li value='8'>Just a Test
<ul class='subsection'> 
<li value='5'><aaaa 
</li></ul> 
<li value='9'>Just a test 2 
</li></ul> 
</li></ul>

布局需要使每个列表以一个活页夹开头，一个部分包含一个子部分，然后是一个节点。然后，每个节点可以包含用户想要的任意数量的元素。

我需要能够移动部分，即使用jQuery.sortable移动到另一个活页夹。这也应该移动所有包含的信息（子节，节点和元素）。这需要在层次结构中一直工作，即能够在子部分内移动节点。但是，节点只能位于子节中，此时我能够将节点拖动到节中，将元素拖动到绑定器/节等中，这是不可能的。我的jQuery如下：

 $('.binder').sortable({
   placeholder: 'ui-state-highlight',
   revert: true,
   items: 'ul.section'
 });

 $('.section').sortable({
   placeholder: 'ui-state-highlight',
   revert: true,
   connectWith: 'ul.binder li',
   containment: 'ul.binder li',
   items: 'ul.subsection'
 });

 $('.subsection').sortable({
   placeholder: 'ui-state-highlight',
   revert: true,
   connectWith: 'ul.section li',
   containment: 'ul.section li',
   items: 'ul.node'
 });

最后一个问题是我似乎能够将一个子部分及其所有内容移动到另一个活页夹，但是我无法将其移回到该活页夹中？

有什么想法吗？

Answer 1

你对jQuery的问题是我认为你有的HTML问题的次要问题。我真的很讨厌给出这个答案 - 它根本没有回答这个问题，但是在目前状态下询问有关Javascript的问题会让你无处可去 - HTML只是已经首先得到修复。

让我们首先考虑您正在使用的元素。您似乎只使用列表元素（关闭span标记除了不存在的开始标记），这是错误的 - HTML是一种标记语言，具有各种各样的元素能够表示文档的各种组件。即使不考虑每个部分和子部分都必须具有交互功能的事实，您选择的元素似乎也存在问题：

每个部分，活页夹和子部分的标题都是标题，因此应使用<h1>和<h2>
即使我们将每个活页夹视为一个部分列表，并且每个部分都是一个子部分列表，页面元素（如段落）也应清楚地标记为适当的元素。
虽然在编写CSS和Javascript时添加类可以提供帮助，并且有助于为其他通用元素添加含义，但是给出每个元素一个类是非常不受欢迎的，因为它既不必要又增加文件复杂性。此外，类似于paragraph的类和列表项的ulist类非常浪费 - 在第一种情况下，您应该只使用<p>标记，而在第二个调用无序列表项时无序列表既令人困惑又重复。

除了语义问题之外，您似乎也不了解HTML语言的技术方面。

应关闭所有标签，以免误解为浏览器
您应该尽量不将未指定的属性放置到元素中，例如您添加到列表中的value属性。

修复这些问题，也许我们可以从Javascript开始......

jQuery可排序列表

1 个答案: