Bootstrap jquery triable ne trie que les lignes?

Question

J'ai essayé d'obtenir triable de travailler avec une grille de boutons bootstrap. C'est un design réactif, avec plusieurs lignes contenant 3 boutons chacun. Je peux activer trier sur le conteneur global, ce qui me permet de faire glisser et déposer les boutons, mais il le fait pour toute la ligne. Je veux être en mesure de sélectionner des boutons individuels et les faire glisser et les déposer sur d'autres lignes. Je pense que

$("buffer0,#buffer1,#buffer2").sortable({ 
    connectWith: "#buffer0,#buffer1,#buffer2" 
}) 

fonctionnerait, mais cela ne permet pas de glisser-déposer. J'ai créé un violon qui montre comment cela fonctionne. (redimensionnez l'écran de sortie afin que vous puissiez voir les lignes)

Vraiment apprécier tout point de vue, regardé cela pendant des heures et je ne sais pas où aller.

https://jsfiddle.net/7yhkp9eo/2/

Answer 1

Vous pouvez utiliser:

items: spécifie les éléments à l'intérieur de l'élément doivent triables.

et

Tolérance: spécifie le mode à utiliser pour tester si l'élément est déplacé en vol stationnaire au-dessus de l'autre élément. Valeurs possibles.

$("#list_content").sortable({ 
 
    tolerance: "pointer", 
 
    items: ".col-sm-4" 
 
}); 
 
$("#list_content").disableSelection();

@import url('//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 

 
<div id="list_content"> 
 
    <div id="buffer0" class="row top-buffer"> 
 
     <div id="row0" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,1" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T11</a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,2" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T12</a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,3" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T13</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="buffer1" class="row top-buffer"> 
 
     <div id="row1" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,4" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T21</a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,5" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T22</a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,6" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T23</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="buffer2" class="row top-buffer"> 
 
     <div id="row2" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,7" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T31</a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,8" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T32</a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <a link-type="c" href="#0,9" class="btn btn-default btn-lg btn-block btn-list navbutton-padding" 
 
        role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T33</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>