JQuery сортируемого список

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