collapsible - tooltip jquery
jQuery UI ordenable y seleccionable (5)
¿Alguien sabe cómo combinar jQuery UI seleccionable y ordenable? Este script: http://nicolas.rudas.info/jquery/selectables_sortables/ no funciona en Chrome y también tiene modificaciones de complementos.
Acabo de encontrar this solución muy fácil 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>" );
Ver: this violín.
Parte de mi jQuery base-arsenal incluye lo siguiente, ya que suele ser molesto cuando vas a arrastrar algo y terminas seleccionando texto ...
// disables text selection on sortable, draggable items
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
No estoy seguro de si puede simplemente activar "desactivar" para "habilitar", pero está mi $ .02. Sin embargo, sin intentarlo ... el sentido común sugiere que puede necesitar definir una sección inactiva dentro del mismo elemento de "grupo", para proporcionar un "identificador" para la acción de arrastre ... de lo contrario, esos clics pueden confundirse implacablemente con el intento de seleccionar / editar ...
Prueba esto. Puede usar Ctrl + Click para selección múltiple y clasificación
Si desea seleccionar varios elementos y MOVERLOS TODOS a otra lista, este fiddle funciona 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>
Esto fue modificado del ejemplo en http://www.pieromori.com.br/snippets/sortable_with_selectable.html gracias a Piero Mori.
Esto es todo lo que puedo darte :) pero la idea está ahí. no está todo completo pero espero que puedas jugar con los valores y ver cómo va desde allí :)