jquery ui wählbar und sortierbar kombiniert

Das ist, was ich habe:
http://jsfiddle.net/hashie5/vk6rZ/
(nicht dagegen, das Layout)jquery ui wählbar und sortierbar kombiniert

Die erste Tabelle ist eine Kombination aus dem zweiten und dritten Tisch, und es ist diese, die muss beendet werden.

Die Sekunden-Tabelle hat sortierbar (mit den Pfeilen).

Die dritte Tabelle ist auswählbar (klicken Sie nicht auf die Pfeile).

Das Ziel ist: Wenn Sie mehrere Elemente auswählen, sollten Sie in der Lage sein, sie alle gleichzeitig zu sortieren.

Wenn es wegen der Tabellen zu schwer ist, wäre ein Beispiel mit Listen auch großartig.

In der Helferfunktion habe ich versucht, alle ausgewählten (ui-ausgewählte Klasse) Artikel klonen, aber das war zu fehlerhaft

EDIT:
ich eine neue Geige erstellt: http://jsfiddle.net/hashie5/AZr9Z/
Das funktioniert gut, aber es ist nicht 100% vollständig noch

Quelle

2012-06-12 Ruben

prüfen dieses Plugin: https://github.com/iamvery/jquery.multisortable und diese Frage hat eine Lösung mit ziehbaren und droppable: http://StackOverflow.com/Questions/3774755/Jquery-Sortable-Select-and-drag-Multiple-list-items – jfrej

danke, aber ich möchte immer noch die sortierbare und selectab verwenden le, um alle Funktionen verfügbar zu haben – Ruben

@Ruben: hi, du sagst, dass Klon fehlerhaft ist, aber hast du mein Beispiel gesehen? es funktioniert gut für mich. Was denken Sie? –

Demohttp://so.devilmaycode.it/jquery-ui-selectable-and-sortable-combined/

der Hauptcode aussehen wie unten.

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"); 
}

ich bin nicht sicher, ob ich verstanden, was Sie wollen, sowieso, was der Code tatsächlich tun ist:

aus der ersten Tabelle, mehrere Elemente auswählen;
indem Sie den Mauszeiger auf eines der ausgewählten Objekte halten;
Sie können die ausgewählten wo immer Sie wollen in der Liste verschieben;
unter Beibehaltung der Sortierreihenfolge aller ausgewählten Elemente;

hoffe das ist, was Sie suchen.

Quelle

2012-06-22 08:59:20

Ich denke, das ist es! Ich bin jetzt nicht bei der Arbeit, aber ich werde einen besseren Blick tormorrow, groß – Ruben

eine Idee, wie ich den Platzhalter erweitern kann, also, wenn ich 2 Elemente auswählen, wird mein Platzhalter 2 Tags haben? – Ruben

und wie kann ich das Kopfgeld geben? – Ruben

Ive nicht getestet, aber hier ist eine Idee:

Hat die erste Liste wählbar (jedoch nicht sortierbar) - dann, wenn eine Auswahl beendet ist, wickeln Sie die Auswahl in einem div und dann machen das div sortierbar - so sollte die Auswahl dann als eine ziehen.

Quelle

2012-06-16 11:41:34 Jimmery

klingt wie eine tolle Idee, aber ich habe keine Ahnung, wie man dazu :) – Ruben

AFAICT Ihre "jsfiddle" funktioniert ziemlich gut ... aber wenn ich frustriert von jquery-ui annoyingly Beharren auf Text vs. whatyever Auswahl sonst sollte es, tun i beziehen sich auf diese Schnipsel ..

// disables text selection on sortable, draggable items 
$(".sortable").sortable(); 
$(".sortable").disableSelection();

Ich bin mir nicht sicher, ob man das "disable" einfach in "enable" umdrehen kann, aber da ist mein $ .02. Auch ist es eine gute Idee, falls jemand einen lahmen Browser/Gerät hat, um möglicherweise einen "inaktiven Abschnitt" innerhalb desselben "Gruppen" -Elements zu definieren, um einen "Griff" für die Ziehaktion bereitzustellen ... (wie der Pfeil Ihrer Geige) -Typ-Dinge) oder auch unerbittlich diese Klicks als die Absicht verwechselt werden wählen/bearbeiten ...

Quelle

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>");

Quelle

2013-07-15 14:12:24 user2583831

können Sie bitte eine funktionierende jsfiddle erstellen? – Ruben

Gist von Matthew Andersen erstellt funktioniert perfekt: 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>

Demo:http://jsfiddle.net/ghaq69b3/

Quelle

2015-04-09 10:15:53

jquery ui wählbar und sortierbar kombiniert

Antwort

Verwandte Themen