Qualcuno sa come combinare l'interfaccia utente jQuery selezionabile e ordinabile? Questo script: http://nicolas.rudas.info/jquery/selectables_sortables/ non funziona in Chrome e ha anche modifiche al plugin.jQuery UI ordinabile e selezionabile
risposta
Appena trovato this molto facile soluzione da 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>");
See: this violino.
Impressionante trovare. Grazie. –
Funziona molto bene.Ho dovuto passare queste opzioni a selezionabili in modo che non trattasse le maniglie come oggetti selezionabili separati e non avvii una selezione durante il trascinamento: '{filtro: 'li', cancella: '.handle'}' – Nick
@ Nick: ha aggiunto il tuo suggerimento – mhu
Questo è quanto posso dare u :) ma l'idea c'è. la sua non alllll completa, ma si spera u può giocare in giro con i valori e vedere come va da lì :)
Parte del mio jQuery base-arsenale include quanto segue, come è solito fastidioso quando si va a trascinare qualcosa e finiscono per la selezione del testo, invece ...
// disables text selection on sortable, draggable items
$(".sortable").sortable();
$(".sortable").disableSelection();
Non sono sicuro se si può semplicemente capovolgere la "disabilitazione" per "consentire", ma c'è il mio $ .02. Senza provarlo però ... il buon senso suggerisce che potrebbe essere necessario definire una sezione inattiva all'interno dello stesso elemento "di gruppo", per fornire un "handle" per l'azione di trascinamento .... oppure quei clic potrebbero inesorabilmente essere scambiati come intento di selezionare/modificare ...
Prova questo. È possibile utilizzare Ctrl + Click
per il multi di selezione e smistamento
Si prega di aggiungere le parti del codice pertinenti nella risposta stessa ... –
Se si desidera selezionare più elementi e li spostano in un altro elenco, questa fiddle funziona bene:
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>
Questo è stato modificato dalla esempio a http://www.pieromori.com.br/snippets/sortable_with_selectable.html grazie a Piero Mori.
- 1. jquery ui trascina + ordinabile
- 2. jQuery UI ordinabile eventi click
- 3. jquery ui ordinabile ('refresh') non funziona!
- 4. jQuery UI Oggetto ordinabile jump on start
- 5. jQuery UI ordinabile - cliccando scrollbar rompe
- 6. jQuery UI ordinabile - Disabilita movimento laterale
- 7. Jquery ui ordinabile serialize non funziona
- 8. Controllo dell'altezza segnaposto con jQuery-UI ordinabile
- 9. evento di trascinamento per jquery-ui-ordinabile
- 10. jQuery UI ordinabile: Scorri tutta la pagina e il contenitore
- 11. callback angolare ui ordinabile
- 12. jQuery UI selezionabili e ordinabili combinati
- 13. jQuery elenco ordinabile e trascinabile
- 14. jQuery treeview con ordinabile
- 15. jQuery UI ordinabile: spostare clone ma mantenere originale
- 16. jquery-ui ordinabile errore di ricezione - PUT 501 (non implementato)
- 17. Come rimuovere jQuery UI ordinabile da un elemento?
- 18. jQuery UI che salva l'elenco ordinabile nell'array PHP
- 19. Jquery ui-ordinabile - impossibile far cadere tr nel vuoto t2
- 20. jQuery UI ordinabile con miniatura griglia bootstrap 3
- 21. jquery UI ordinabile: come posso modificare l'aspetto dell'oggetto "segnaposto"?
- 22. jquery UI ordinabile: come lasciare l'originale visibile fino alla caduta?
- 23. Rileva drop con jQuery ordinabile
- 24. jQuery UI selezionabile, collegamenti non seguiti al clic
- 25. jQuery UI selezionabile - deseleziona l'elemento selezionato al momento del clic
- 26. jquery ui - ordinabile: trascinare con l'icona 'handle' all'interno di elemento ordinabile
- 27. JQuery sest ordinabile sdiv divs
- 28. jQuery altezza elemento ordinabile
- 29. jQuery ordinabile - Come ottenere l'attributo trascinato corrente
- 30. Interfaccia jQuery - Combinabile selezionabile con Draggable
Io l'ho fatto, ma non con ordinabile e selezionabile, a causa di alcuni problemi di copyright non ti do il codice :), ma ti mostrerò le istruzioni su come :) – Val