Listes triées connectées

Question

Je travaille avec des listes triées connectées et j'ai besoin de la possibilité d'ajouter une liste supplémentaire, mais cela ne fonctionne tout simplement pas.

J'ai un XHTML comme ceci:

<div id="content"> 
    <div class="line"> 
     <span class="element">1</span> 
     <span class="element">2</span> 
     <span class="element">3</span> 
    </div> 
    <div class="line"> 
     <span class="element">4</span> 
     <span class="element">5</span> 
     <span class="element">6</span> 
    </div> 
</div> 

où les éléments doivent être sortable, et l'as de l'utilisateur pour être en mesure de les passer d'un .line à l'autre. Mais lors du tri, une ligne supplémentaire vide doit être ajoutée, au cas où l'utilisateur souhaite placer un élément dans une nouvelle ligne.

J'ai essayé d'ajouter un contenu div.line à div #, mais les éléments ne peuvent pas être supprimés.

Une idée?

Merci!

Answer 1

Cela devrait faire ce que vous voulez. Mais est vraiment non trivial et fortement adapté pour gérer exactement le balisage comme celui que vous avez fourni. Si vous ne comprenez pas cela ou si cela ne fonctionne pas, postez un commentaire.

consulter ici pour la démonstration rapide http://jsbin.com/uhoga (http://jsbin.com/uhoga/edit pour le code)

//pseudo unique id generator 
var uid = 0; 

function starter() { 
    var lines = $("div.line"); 
    var len = lines.size(); 
    //insert empty div.line at end with "unique" id 
    lines.eq(len-1).after("<div class='line' id='line"+uid+"' />"); 
    //make it a sortable too 
    $('#line'+uid).sortable({ 
     //connect with other div.lines which don't have same id 
     connectWith: 'div.line:not([id=line'+uid+'])', 
     start: starter, 
     stop: stopper, 
     //needed to stop some "flickering" 
     appendTo: 'div.line[id=line'+uid+']', 
     items: 'span.element' 
    }); 
    uid++; 
    //refresh this sortable so it sees the newly inserted as possible "target" 
    $(this).sortable('refresh'); 
} 

function stopper() { 
    //remove all div.lines which are empty (have no span.element children) 
    $("div.line:not(:has(> span.element))").remove(); 
} 

//initial setup 
$("div.line").each(function(i, ele) { 
    var jEle = $(ele); 
    //assuming the initially present div.line elements have no id 
    jEle.attr("id", "line"+uid); 
    jEle.sortable({ 
     connectWith: 'div.line:not([id=line'+uid+'])', 
     start: starter, 
     stop: stopper, 
     //needed to stop some "flickering" 
     appendTo: 'div.line[id=line'+uid+']', 
     items: 'span.element' 
    }); 
    uid++; 
});