Est-ce que quelqu'un sait comment combiner l'interface utilisateur jQuery sélectionnable et triable? Ce script: http://nicolas.rudas.info/jquery/selectables_sortables/ ne fonctionne pas dans Chrome et il comporte également des modifications de plug-in.jQuery UI triable et sélectionnable
Répondre
juste trouvé this solution très facile de rdworth:
CSS:
ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }
HTML:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Javascript:
$("#list")
.sortable({ handle: ".handle" })
.selectable({ filter: "li", cancel: ".handle" })
.find("li")
.addClass("ui-corner-all")
.prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");
Voir: this violon.
Awesome find. Je vous remercie. –
Cela fonctionne plutôt bien.J'ai dû passer ces options à selectable afin qu'il ne traite pas les poignées comme des objets sélectionnables séparés, et n'a pas commencé une sélection en les faisant glisser: '{filter: 'li', cancel: '.handle'}' – Nick
@Nick: ajouté votre suggestion – mhu
C'est autant que je peux donner u :) mais l'idée est là. ce ne est pas alllll complet mais nous espérons u peut jouer au sujet des valeurs et voir comment il va de là :)
Une partie de ma base arsenal jQuery comprend les éléments suivants, comme il est généralement ennuyeux quand vous allez faire glisser quelque chose et finir par la sélection de texte à la place ...
// disables text selection on sortable, draggable items
$(".sortable").sortable();
$(".sortable").disableSelection();
je ne sais pas si vous pouvez simplement retourner le « désactiver » pour « activer », mais il est mon .02 $. Sans l'essayer cependant ... le bon sens suggère que vous pourriez avoir besoin de définir une section inactive dans le même élément "group", pour fournir un "handle" pour l'action de glisser .... ou bien ces clics peuvent inexorablement se tromper en tant que intention de sélectionner/modifier ...
Essayez ceci. Vous pouvez utiliser Ctrl + Click
pour plusieurs de sélection et de tri
S'il vous plaît ajouter les parties pertinentes du code dans la réponse elle-même ... –
Si vous voulez sélectionner plusieurs éléments et les déplacer TOUS à une autre liste, ce fiddle fonctionne bien:
HTML:
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<ul id="album" class="connectedSortable">
<li id="li1"><div>1- First</div></li>
<li id="li2"><div>2- Second</div></li>
<li id="li3"><div>3- Third</div></li>
<li id="li4"><div>4- Fourth</div></li>
<li id="li5"><div>5- Fifth</div></li>
<li id="li6"><div>6- Sixth</div></li>
<li id="li7"><div>7- Seventh</div></li>
<li id="li8"><div>8- Eighth</div></li>
</ul>
<ul id="album2" class="connectedSortable">
<li id="li1"><div>1- 1</div></li>
<li id="li2"><div>2- 2</div></li>
<li id="li3"><div>3- 3</div></li>
<li id="li4"><div>4- 4</div></li>
<li id="li5"><div>5- 5</div></li>
<li id="li6"><div>6- 6</div></li>
<li id="li7"><div>7- 7</div></li>
<li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>
<br style="clear:both">
</body>
Javascript:
<script>
$(function() {
//
$('body').selectable({
filter: 'li'
//filter: '#album2 > li'
});
/*
Since the sortable seems unable to move more than one object at a
time, we'll do this:
The LIs should act only as wrappers for DIVs.
When sorting a LI, move all the DIVs that are children of selected
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.
When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.
Voilá!
Tip: doesn't work so great if you try to stick the LIs inside the LI
*/
$('.connectedSortable').sortable({
connectWith: ".connectedSortable",
delay: 100,
start: function(e, ui) {
var topleft = 0;
// if the current sorting LI is not selected, select
$(ui.item).addClass('ui-selected');
$('.ui-selected div').each(function() {
// save reference to original parent
var originalParent = $(this).parent()[0];
$(this).data('origin', originalParent);
// position each DIV in cascade
$(this).css('position', 'absolute');
$(this).css('top', topleft);
$(this).css('left', topleft);
topleft += 20;
}).appendTo(ui.item); // glue them all inside current sorting LI
},
stop: function(e, ui) {
$(ui.item).children().each(function() {
// restore all the DIVs in the sorting LI to their original parents
var originalParent = $(this).data('origin');
$(this).appendTo(originalParent);
// remove the cascade positioning
$(this).css('position', '');
$(this).css('top', '');
$(this).css('left', '');
});
// put the selected LIs after the just-dropped sorting LI
$('#album .ui-selected').insertAfter(ui.item);
// put the selected LIs after the just-dropped sorting LI
$('#album2 .ui-selected').insertAfter(ui.item);
}
});
//
});
</script>
CSS:
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#album {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album2 {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album li {
float: left;
margin: 5px;
}
#album2 li {
float: left;
margin: 5px;
}
#album div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album2 div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album .ui-selecting div,
#album .ui-selected div {
background-color: #3C6;
}
#album2 .ui-selecting div,
#album2 .ui-selected div {
background-color: #3C6;
}
#anotheralbum {
list-style: none;
float: left;
width: 20%;
height: 800px;
border: 1px solid blue;
}
</style>
Cela a été modifié par l'exemple à http://www.pieromori.com.br/snippets/sortable_with_selectable.html grâce à Piero Mori.
- 1. passant jQuery ui variable triable
- 2. Rendre la table HTML triable et sélectionnable
- 3. jquery ui sérialisable triable des enfants
- 4. Jquery UI triable, l'emplacement du magasin et la taille?
- 5. IE7/8, jQuery ui triable, et le contenu caché. O.o
- 6. jquery imbattable triable
- 7. JQuery UI sélectionnable événement d'arrêt ne fonctionne pas dans IE
- 8. Elément triable Jquery
- 9. jquery-ui: déclenche la sélection d'une liste ol-li sélectionnable
- 10. jQuery UI sélectionnable - désélectionner l'élément sélectionné au clic
- 11. JQuery UI Plugin sélectionnable: Rendre la barre de défilement non sélectionnable lorsque div déborde
- 12. JQuery en direct et triable
- 13. jQuery comportement triable inattendu
- 14. jQuery - deux colonnes - triable et cookie?
- 15. Onglets jQuery - Triable par jour?
- 16. JQuery triable souris déportée
- 17. jQuery UI Sortable Position
- 18. jquery triable avec php et mysql
- 19. jquery Sortable/sélectionnable: enfant filtrage contrôle
- 20. jquery niché liste triable
- 21. jQuery Liste modifiable/triable
- 22. jQuery: liste imbriquée triable?
- 23. Link ne fonctionne pas à l'intérieur UI sélectionnable
- 24. jQuery triable UI, chaque div triable contient un iFrame est actualisé dans FF3 mais pas dans IE7
- 25. Problèmes avec l'interface utilisateur jQuery triable et les tables
- 26. sélectionnable Tableau Ligne Jquery Asp.net
- 27. jquery triable sauf celui-ci
- 28. jQuery iframeFix sur un triable
- 29. Enlever div d'un triable jquery
- 30. Simple galerie jQuery et triable: une dernière pièce manquante
Je l'ai fait, mais pas avec triable et sélectionnable, en raison de certains problèmes de droits d'auteur je cnt donner le code :), mais je vais vous montrer comment faire :) – Val