tri liste imbriquée, ne permettent que li à trier witin même ul

Question

$(document).ready(function() { 

    $("#test-list").sortable({ 
     items: "> li", 
     handle : '.handle', 
     axis: 'y', 
     opacity: 0.6, 
     update : function() { 
      var order = $('#test-list').sortable('serialize'); 
      $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
     } 
    }); 
    $("#test-sub").sortable({ 
     containment: "ul", 
     items: "li", 
     handle : '.handle2', 
     axis: 'y', 
     opacity: 0.6, 
     update : function() { 
      var order = $('ul').sortable('serialize'); 
      $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
     } 
    }); 

}); 

<ul id="test-list"> 
    <li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li> 
    <li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" /> 
    <ul id="test-sub"> 
     <li id="listItem_4"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> 
     <li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> 
     <ul id="test-sub"> 
      <li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

les problèmes que j'ai:

1. tri principal ul fonctionne, mais pas tout le temps - je vais essayer de corriger que mon propre, mais s'il y a un problème avec le code ici et pas celui dans un processus triable - dites-moi. Déplacer li dans l'ul principal est ok mais le sous ou le sous-marin a un problème - je peux faire glisser quelque chose d'un sub à son sub ou l'autre - je ne veux pas que ça se produise.
2. je veux être capable de glisser li et en sélectionnant celui que seul ce groupe ul enverra à proccess-sortable pour être mis à jour - comment puis-je attraper le ul spécifique de li je suis draging?

Answer 1

la première chose que je vois est que vous donniez le même identifiant à plusieurs UL de et vous avez vraiment besoin de mettre sortable à la mère uL vous pouvez utiliser l'un des sortable events tels que le changement pour obtenir le ul du li vous avez déplacé pour gérer le processus de charge

Edit: ajouter plus d'informations

ok alors je suis retourné et regardé ce que je l'ai fait pour mon emboîtés triables et ce que j'avais fait a été utilisé behind's nested sortable il faut ui. noyau mais fait ce que nous voulons faire. J'ai ensuite utilisé serialize_list pour sérialiser les données sur mon serveur. Pas prétendre que c'est le meilleur mais c'est comme ça que j'ai fini par le faire.

Modifier Encore une fois voici ce que je trouve dans votre code, je ne change rien simplement commenté il

$(document).ready(function() { 
    $("#test-list").sortable({ 
     items: "> li", // this is wrong should be "li" 
     handle : '.handle', 
     axis: 'y', 
     opacity: 0.6, 
     update : function() { 
     var order = $('#test-list').sortable('serialize'); 
     $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
     } 
    }); 


    $("#test-sub").sortable({ // this should be a class so that you can target multiple items 
     containment: "ul", 
     items: "li", 
     handle : '.handle2', 
     axis: 'y', 
     opacity: 0.6, 
     update : function() { 
     var order = $('ul').sortable('serialize'); // this say get all ul items it should probably target $(this).closest('ul); 
     $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
     } 
    }); 
    }); 

alors vous devez passer par votre code html assurez-vous que vous avez pas ids double et votre imbrication est désactivée en plus que votre manque un devis sur listitem_4

prendre le temps de regarder votre html avant de poster, il est souvent un problème, vous devez utiliser w3's validator