jQuery sortable list question

Question

I have a list structured like below:

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

The layout needs to be so that each list starts with a binder, with a section, containing a subsection, then a node. Each node can then contain as many elements as the user wants.

I need to be able to move sections around, ie move to another binder with jQuery.sortable. This should also move all contained info (subsections, nodes and elements) . This needs to work all the way down the hierarchy, ie being able to move nodes around within subsections. However, nodes can only be within subsections, at the moment I am able to drag nodes into sections, and elements into binders/sections etc and this should not be possible. my jQuery is below:

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

Final problem is I seem to be able to move a subsection and all its contents to another binder, but then I cannot move it back into that binder?

Any ideas?

Thanks in advance.

Answer 1

Your problem with the jQuery is secondary to the problem with HTML which I perceive you have. I really hate to give this answer - it doesn't answer the question at all, but in its current state asking question about the Javascript will get you nowhere - the HTML simply has to be fixed first.

Let's first consider the elements you are using. You seem to be only using the list elements (with the exception of a closing span tag to an non-existent opening tag), and this is wrong - HTML is a markup language, with a wide variety of elements capable of representing the various components of a document. Even without considering the fact that each section and subsection have to have interactive capabilities, your choice of elements seems to be problematic:

• The title of each section, binder and subsection are headers, and thus should be indicated as such with tags such as <h1> and <h2>
• Even if we consider each binder to be a list of section, and each section to be a list of subsection, page elements like paragraphs should clearly be mark'd up with the appropriate elements.
• Although adding classes can help when you write CSS and Javascript, as well as help add meaning to otherwise generic elements, giving every element a class is deeply frowned upon, as it is both unnecessary and increases document complexity. In addition classes like paragraph for a paragraph and ulist for a list item is incredibly wasteful - in the first case you should simply use the <p> tag while in the second calling an unordered list item an unordered list is both confusing and repetitive.

Apart from the problems with semantic, you also do not seem to understand the technical aspects of the HTML language.

• All tags should be closed, to avoid misinterpretation by the browser
• You should try not to place unspecified attributes to elements, such as the value attribute you have added to the lists.

Fix those, and maybe we can start on the Javascript...