jQuery seleccionable interfaz de usuario y se puede ordenar combinados

Esto es lo que tengo:
http://jsfiddle.net/hashie5/vk6rZ/
(no importa el diseño)jQuery seleccionable interfaz de usuario y se puede ordenar combinados

La primera tabla es una combinación de la segunda y la tercera tabla, y es éste que necesita ser terminado.

La tabla de segundos se puede ordenar (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 sería genial también.

En la función auxiliar Probé la clonación de todos los elementos seleccionados (clase seleccionada ui-), pero que era demasiado buggy de

EDIT:
He creado un nuevo violín: http://jsfiddle.net/hashie5/AZr9Z/
Esto funciona bien, pero no es 100% completo todavía

Fuente

2012-06-12 Ruben

Comprobar este plugin: https://github.com/iamvery/jquery.multisortable y esto la pregunta tiene una solución que se puede arrastrar y soltar: http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items – jfrej

gracias, pero todavía quiero usar el ordenable y el selectab para tener todas las funciones disponibles – Ruben

@Ruben: hola, usted dice que el clon tiene errores, pero ¿vio mi ejemplo? funciona bien para mí ¿Qué piensas? –

demostraciónhttp://so.devilmaycode.it/jquery-ui-selectable-and-sortable-combined/

el aspecto de código principal, como 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">&nbsp;</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 haber entendido lo que quiere, de todos modos lo que el código realmente hacen es:

de la primera tabla, seleccionar varios elementos;
manteniendo presionado el mouse sobre uno de los elementos seleccionados;
puede mover los seleccionados donde quiera en la lista;
manteniendo el orden de todos los elementos seleccionados;

Espero que esto es lo que está buscando.

Fuente

2012-06-22 08:59:20

¡Creo que es esto! No estoy trabajando ahora, pero lo veré mejor tormorrow, genial – Ruben

¿Alguna idea de cómo puedo expandir el marcador de posición, así que si selecciono 2 elementos, mi marcador de posición tendrá 2 etiquetas ? – Ruben

y cómo puedo dar la recompensa? – Ruben

Ive no se ha probado esto, pero aquí es una idea:

tener la primera lista seleccionable (pero no clasificable) - a continuación, cuando se termina una selección, envuelva la selección en un div y luego hacer ese div ordenable - de esta manera la selección debería arrastrar como uno.

Fuente

2012-06-16 11:41:34 Jimmery

suena como una gran idea, pero no tengo ni idea de cómo hacerlo :) – Ruben

AFAICT su "jsFiddle" funciona bastante bien ... pero cada vez que me siento frustrado por jquery-ui molesto insistiendo en la selección de texto vs. whatyever otra cosa que debería hacer, 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-cosas) o de lo contrario los clics pueden implacablemente confundirse con la intención de seleccionar/editar ...

Fuente

2012-06-21 05:00:41

$("#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>");

Fuente

2013-07-15 14:12:24 user2583831

¿Puedes crear un jsfiddle que funcione para esto, por favor? – Ruben

Gist creada 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">&#8225;</span>Item 1</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 3</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</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/

Fuente

2015-04-09 10:15:53

jQuery seleccionable interfaz de usuario y se puede ordenar combinados

Respuesta

Cuestiones relacionadas