сортируемый список jQuery - PullRequest
Новая
       12

сортируемый список jQuery

0 голосов
/ 19 августа 2010

У меня есть список, структурированный как показано ниже: 

<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'
 });

Последняя проблема: мне кажется, что я могу переместить подраздел и все его содержимое в другое связующее, но тогда я не могу переместить его обратно в это связующее?

Есть идеи?

1 Ответ

0 голосов
/ 19 августа 2010

Ваша проблема с jQuery является вторичной по отношению к проблеме с HTML, которая, как мне кажется, у вас есть. Я очень не хочу давать этот ответ - он вообще не отвечает на вопрос, но в его текущем состоянии заданный вопрос о Javascript ни к чему не приведет - HTML просто имеет , который должен быть исправлен первым.

Давайте сначала рассмотрим элементы, которые вы используете. Похоже, вы используете только элементы списка (за исключением закрывающего тега span для несуществующего открывающего тега), и это неправильно - HTML является языком разметки с большим разнообразием элементов, способных представлять различные компоненты документа. Даже без учета того факта, что каждый раздел и подраздел должны иметь интерактивные возможности, выбор элементов выглядит проблематичным:

  • Заголовок каждого раздела, подшивка и подраздел являются заголовками, и поэтому должны указываться как таковые с такими тегами, как <h1> и <h2>
  • Даже если мы рассматриваем каждый переплет как список разделов, а каждый раздел как список подразделов, элементы страницы, такие как абзацы, должны быть четко помечены соответствующими элементами.
  • Несмотря на то, что добавление классов может помочь при написании CSS и Javascript, а также поможет добавить смысл в другие универсальные элементы, придание каждому элементу класса вызывает нарекания, так как оно не нужно и увеличивает документ сложность. Кроме того, классы, такие как paragraph для абзаца и ulist для элемента списка, невероятно расточительны - в первом случае вы должны просто использовать тег <p>, тогда как во втором вызове неупорядоченного элемента списка неупорядоченный список вводит в заблуждение и повторяющийся.

Помимо проблем с семантикой, вы также, похоже, не понимаете технические аспекты языка HTML.

  • Все теги должны быть закрыты, чтобы избежать неправильной интерпретации браузером
  • Вы должны стараться не помещать неопределенные атрибуты в элементы, такие как атрибут value, который вы добавили в списки.

Исправьте это, и, возможно, мы можем начать с Javascript ...

...