jQuery Dragable + Sortable - Comment faire glisser et déposer entre deux listes déroulantes

Question

Je voudrais avoir deux listes, Articles disponibles et Articles sélectionnés, où les Articles disponibles sont assignés aux Articles sélectionnés par glisser-déposer. Je demande que les éléments sélectionnés soient triés, mais pas les éléments disponibles. Le défi est que les deux listes peuvent potentiellement contenir un nombre important d'éléments, et doivent donc être défilables.

Voici le jQuery je jusqu'ici:

 <script type="text/javascript"> 
     $(function() { 
      $("#available > li").draggable({ 
       revert: 'invalid', 
       connectToSortable: '#selected', 
       containment: '#drag_container' 
      }); 

      $("#selected").sortable({ 
       axis: 'y', 
       placeholder: 'ui-state-highlight' 
      }); 
     }); 
    </script> 

Et le code HTML correspondant:

  <div class="drag_container"> 
      <ul id="available" class="drag_column draggable"> 
       <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li> 
       <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li> 
       <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li> 
       <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li> 
       <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li> 
       <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
      </ul> 


      <ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;"> 
       <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li> 
       <li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
       <li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li> 
       <li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li> 
       <li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li> 
       <li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li> 
       <li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li> 
       <li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li> 
       <li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li> 
       <li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li> 
      </ul> 
      <div style="clear: both">&nbsp;</div> 
     </div> 

Avec l'exigence de liste déroulante, cependant, je ne peux pas obtenir le comportement draggable travailler élégamment (voir la démo au http://pastehtml.com/view/1bsk6bt.html).

Une fois que l'élément glissé est entré dans la liste Éléments disponibles, il disparaît derrière le cadre défilable. J'ai essayé l'assistant clone, et j'ai aussi essayé de jouer avec des divs, des options de débordement différentes, en désactivant l'option de défilement dans jQuery, mais je n'arrive pas à le faire fonctionner correctement. Je suis sûr que quelqu'un là-bas a accompli quelque chose comme ce que j'ai l'intention de faire ici et peut me sauver un peu de temps? :)

Toute aide serait grandement appréciée!

Answer 1

Ouf! C'était amusant à réparer.

Le premier problème, avec la liste défilant pour toujours horizontalement, j'ai corrigé avec quelques changements simples de débordement dans votre CSS. J'ai enlevé les deux attributs de débordement de votre .drag_column, et ai mis un débordement: caché dans .drag_container.

.drag_container { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
    border: 1px solid black; 
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
} 

.drag_column { 
    padding: 5px; 
    width: 490px; 
    height: 200px; 
    float: left; 
    position: relative; 
} 

Malheureusement, quand je l'ai fait, il a créé une erreur de position lorsque vous avez déplacé votre draggable d'une liste à l'autre (il tirer vers le haut, selon l'élément liste que vous avez choisi). Pour résoudre ce problème, j'ai ajouté la ligne "helper: clone" à votre fonction de création déplaçable.

$("#available > li").draggable({ 
    revert: 'invalid', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 
    helper: 'clone' 
}); 

Une fois de plus, ceci a créé un effet indésirable. L'assistant clone fait en sorte que la liste d'origine n'a jamais d'éléments supprimés. Pour résoudre ce problème, j'ai dû créer manuellement une fonction qui supprimerait l'ancien élément. Ce que j'ai fait, c'est que j'ai ajouté une fonction start: à votre objet déplaçable, qui a saisi l'identifiant de l'objet et l'a placé dans une variable. Puis j'ai créé un objet droppable de votre liste #selected, et y ai fait une drop: function. Cette fonction drop fait simplement un slideUp (100) sur l'objet avec l'identifiant correspondant. Notez que j'ai une création de variable au début du script - cela corrige un bug dans IE.

var dragged = null; 
$(function() { 
    $("#available > li").draggable({ 
     revert: 'invalid', 
     connectToSortable: '#selected', 
     containment: '#drag_container', 
     helper: 'clone', 
     start: function(ui, event) { 
      dragged = $(this).attr('id'); 
     } 
    }); 
    $("#selected").droppable({ 
     drop: function(event, ui) { 
      var ident = "#" + dragged; 
      $(ident).slideUp(100); 
     } 
    }); 

J'ai posté une page avec le code HTML complet à http://pastehtml.com/view/1by9nfd.html afin que vous puissiez jouer si vous voulez. J'espère que cela t'aides!

Answer 2

je besoin de cette fonctionnalité et avait trouvé un moyen de faire

utilisation appendTo: « corps » et la position absolue au démarrage fixé. L'élément qui est traîné est ajouté au corps et est toujours "en haut" des autres éléments car sa position est absente du corps.

$("#available > li").draggable({ 

    revert: 'invalid', 
    appendTo: 'body', 
    helper: 'clone', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 

start: function(event, ui){ 

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone 

}, 


stop: function(event, ui){ 

    $(ui.helper).css('position', 'relative'); // if you want 

} 

}); 

Hope this helps