jQuery limite triable à la ligne parent

Question

J'ai donc une table qui a plusieurs catégories, avec plusieurs éléments en dessous dans chaque catégorie.

Quelque chose comme:

<tr> 
<td>Category1</td> 
</tr> 
<tr> 
    <td>Item1<td> 
</tr> 
<tr> 
    <td>Item2</td> 
</tr> 
<tr> 
    <td>Item3</td> 
</tr> 
<tr> 
    <td>Category2</td> 
</tr> 
<tr> 
    <td>item1</td> 
</tr> 

Je veux être en mesure de trier chaque « élément » au sein de sa catégorie seulement. Donc "item1" à l'intérieur de "category2" ne devrait pas pouvoir être déplacé vers "category1". Pas vraiment sûr de comment accomplir cela.

Answer 1

Vous pouvez implémenter l'interaction triable de jQuery pour répondre à vos besoins. Voici un exemple de travail:

<style type="text/css"> 
    .isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; } 
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; } 

</style> 

<ul id="category1" class="isSortable" style="border:1px solid blue;"> 
    <li class="ui-state-default">item1</li> 
    <li class="ui-state-default">item2</li> 
    <li class="ui-state-default">item3</li> 
</ul> 

<ul id="category2" class="isSortable" style="border:1px solid red;"> 
    <li class="ui-state-default">item1</li> 
    <li class="ui-state-default">item2</li> 
    <li class="ui-state-default">item3</li> 
</ul> 

<script type="text/javascript"> 

    $('ul.isSortable').each(function(){ 
     $(this).sortable({ 
      connectWith : $(this).attr('id') 
     }) 
    }); 

</script> 

EDIT:

code suivant devrait mettre en œuvre vos besoins:

<style type="text/css"> 
    .isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; } 
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; } 

</style> 

<ul class="isSortableBlock"> 
    <li> 
     <span>Category</span> 
     <ul id="category1" class="isSortable" style="border:1px solid blue;"> 
     <li class="ui-state-default">item1</li> 
     <li class="ui-state-default">item2</li> 
     <li class="ui-state-default">item3</li> 
     </ul> 
    </li> 
    <li> 
     <span>Category 2</span> 
     <ul id="category2" class="isSortable" style="border:1px solid blue;"> 
     <li class="ui-state-default">item1</li> 
     <li class="ui-state-default">item2</li> 
     <li class="ui-state-default">item3</li> 
     </ul> 
    </li> 
</ul> 

<script type="text/javascript"> 

    $('ul.isSortableBlock').sortable(); 

    $('ul.isSortable').each(function(){ 
    $(this).sortable({ 
    connectWith : $(this).attr('id') 
    }) 
    }); 

</script> 

Je voudrais aussi mis à jour la même chose dans le lien http://jsfiddle.net/sKnLR/8/