jquery - example - sortable js
jquery ui seleccionable y ordenable combinado (5)
No he probado esto, pero aquí hay una idea:
Haga que la primera lista sea seleccionable (pero no ordenable); luego, cuando finalice una selección, ajuste la selección en un div y luego divida ese div; de esta manera, la selección debería arrastrar como uno.
Esto es lo que conseguí:
http://jsfiddle.net/hashie5/vk6rZ/
(no importa el diseño)
La primera tabla es una combinación de la segunda y la tercera tabla, y es esta la que debe completarse.
La tabla de segundos tiene ordenable (con las flechas).
La tercera tabla tiene seleccionables (no haga clic en las flechas).
El objetivo es: cuando selecciona varios elementos, debe poder ordenarlos todos al mismo tiempo.
Si es difícil debido a las tablas, un ejemplo con listas también sería genial.
En la función auxiliar intenté clonar todos los elementos seleccionados (clase seleccionada por la ui), pero eso era demasiado complicado
EDITAR:
Creé un nuevo violín: http://jsfiddle.net/hashie5/AZr9Z/
Esto funciona bien, pero aún no está 100% completo
AFAICTE que su "jsfiddle" funciona bastante bien ... pero cada vez que me frustre jquery-ui insistiendo molestamente en seleccionar texto frente a lo que debería estar haciendo, me refiero a este fragmento.
// 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. Además, es una buena idea, en caso de que alguien tenga un navegador / dispositivo cojo para definir una "sección inactiva" dentro del mismo elemento de "grupo", para proporcionar un "control" para la acción de arrastre ... (como la flecha de tu violín -type-things) o bien, esos clics pueden confundirse implacablemente con la intención de seleccionar / editar ...
el código principal se ve a continuación.
sort : function(event, ui) {
var $helper = $(''.ui-sortable-helper''), hTop = $helper.offset().top, hStyle = $helper.attr(''style''), hId = $helper.attr(''id'');
if (first_rows.length > 1) {
$.each(first_rows, function(i, item) {
if (hId != item.id) {
var _top = hTop + (26 * i);
$(''#'' + item.id).addClass(''ui-sortable-helper'').attr(''style'', hStyle).css(''top'', _top);
}
});
}
},
start : function(event, ui) {
if (ui.item.hasClass(''ui-selected'') && $(''.ui-selected'').length > 1) {
first_rows = $(''.ui-selected'').map(function(i, e) {
var $tr = $(e);
return {
tr : $tr.clone(true),
id : $tr.attr(''id'')
};
}).get();
$(''.ui-selected'').addClass(''cloned'');
}
ui.placeholder.html(''<td colspan="99"> </td>'');
},
stop : function(event, ui) {
if (first_rows.length > 1) {
$.each(first_rows, function(i, item) {
$(item.tr).removeAttr(''style'').insertBefore(ui.item);
});
$(''.cloned'').remove();
first_rows = {};
}
$("#uber tr:even").removeClass("odd even").addClass("even");
$("#uber tr:odd").removeClass("odd even").addClass("odd");
}
No estoy seguro de entender lo que quieres, de todos modos, lo que el código realmente hace es:
- de la primera mesa, selecciona varios elementos;
- al mantener presionado el mouse sobre uno de los elementos seleccionados;
- puede mover aquellos seleccionados donde quiera en la lista;
- mantener el orden de todos los elementos seleccionados;
Espero que esto es lo que estás buscando.
$( "#list" )
.sortable({ handle: ".handle" })
.selectable()
.find( "li" )
.addClass( "ui-corner-all" )
.prepend( "<div class=''handle''><span class=''ui-icon ui-icon-carat-2-n-s''></span></div>" );
Gist creado por Matthew Andersen funciona perfectamente: https://gist.github.com/mattandersen/9777423
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" />
<style>
#list {
list-style: none;
padding-left: 0;
}
#list .sort-handle {
display: none;
}
#list .ui-selected .sort-handle
{
display: inline;
padding: 0 0.5em;
cursor: pointer;
}
li.ui-selected {
background-color: #8888cc;
color: white;
font-weight: bold;
background-image: none;
}
li.ui-selecting {
background-color: #ccccff;
color: white;
background-image: none;
}
</style>
</head>
<body>
<ul id="list">
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 1</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 2</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 3</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 4</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 5</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 6</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 7</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 8</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 9</li>
<li class="ui-widget-content"><span class="sort-handle">‡</span>Item 10</li>
</ul>
<script>
$(function() {
$(''#list'').selectable({
cancel: ''.sort-handle''
}).sortable({
items: "> li",
handle: ''.sort-handle'',
helper: function(e, item) {
if ( ! item.hasClass(''ui-selected'') ) {
item.parent().children(''.ui-selected'').removeClass(''ui-selected'');
item.addClass(''ui-selected'');
}
var selected = item.parent().children(''.ui-selected'').clone();
item.data(''multidrag'', selected).siblings(''.ui-selected'').remove();
return $(''<li/>'').append(selected);
},
stop: function(e, ui) {
var selected = ui.item.data(''multidrag'');
ui.item.after(selected);
ui.item.remove();
}
});
});
</script>
</body>
Demostración: http://jsfiddle.net/ghaq69b3/