jQuery UI seçilebilir ve sıralanabilir Bu ne var

olduğunu kombine:
http://jsfiddle.net/hashie5/vk6rZ/
jQuery UI seçilebilir ve sıralanabilir Bu ne var

birinci tablo, ikinci ve üçüncü tablonun bir kombinasyonudur ve bu kişi o (düzenini umursamıyorum) o bitmiş olması gerekiyor.

Saniye tablosunda (oklarla) sıralanabilir.

Üçüncü tabla seçilebilir (oklara tıklamayın).

Amaç: Birden çok öğe seçtiğinizde, hepsini aynı anda sıralayabilmeniz gerekir.

Tablolar nedeniyle zorlanıyorsa, listeleri içeren bir örnek de harika olur.

Ben seçilen tüm (ui-seçilmiş sınıfı) öğeleri klonlama çalıştı yardımcı fonksiyonunda

, ama bu da hatalı olduğunu

DÜZENLEME: Ben yeni bir keman yarattı
: http://jsfiddle.net/hashie5/AZr9Z/
Bu güzel çalışıyor, ama değil 100% tamamlandı henüz

kaynak

2012-06-12 Ruben

Kontrol bu eklenti: https://github.com/iamvery/jquery.multisortable ve bu sorusu sürüklenebilir ve droppable kullanarak bir çözümü vardır: http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items – jfrej

sayesinde ama hala sıralanabilir ve selectab kullanmak istiyorum le tüm fonksiyonlara sahip olmak – Ruben

@Ruben: merhaba, klonun buggy olduğunu söylüyorsun, ama benim örneğimi gördün mü? benim için iyi çalışıyor. ne düşünüyorsun? –

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

aşağıda gibi ana kod bakış ...-şeyleri -tipi) ya da başka bu tıklamaları amansızca/düzenlemek seçmek için niyet olarak yanlış olabilir.

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

i zaten hangi kodun aslında yapmak olduğunu, ne istediğini anlamış emin değilim: Birden fazla öğe seçmek, 1 tablodan

; Seçili öğelerin birini tuttuğunu tutarak
;
Eğer listede istediğiniz nereye kadar seçilenler hareket edebiliyoruz; Seçilen tüm öğelerin sıralama düzenini yönetmek için
;

umut bu aradığınız budur. Matthew Andersen tarafından oluşturulan

kaynak

2012-06-22 08:59:20

Sanırım bu! Şimdi işte değilim ama daha iyi bir görünüm tormorrow alacağım, büyük – Ruben

ben 2 öğe seçerseniz, benim tutucu 2 etiketine sahip olacak bu yüzden, yer tutucu genişletmenin yollarını bir fikrin? – Ruben

ve nasıl ödül verebilirim? – Ruben

Ive bu test, ama bir fikrim değil:

ilk liste seçilebilir var (ama sıralanabilir) - bir seçim bittiğinde, daha sonra yapmak daha sonra bir div seçim sarın ve bu div sortable - bu şekilde seçim daha sonra bir tane olarak sürüklemelidir. senin "jsfiddle" AFAICT

kaynak

2012-06-16 11:41:34 Jimmery

harika bir fikir gibi geliyor, ama bunun nasıl yapılacağını bilmiyorum :) – Ruben

oldukça iyi çalışır ... ama jquery-ui tarafından sinirli olsun her can sıkıcı o yapıyor olması gereken başka whatyever vs metin seçme ısrar i .. bu pasajı bakın

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

"Devre dışı bırak" işlevini "etkinleştir" e çevirip getiremeyeceğinizden emin değilim, ancak $ .02'm var. Ayrıca, birisinin iyi bir fikir olması, birisinin aynı "grup" öğesi içinde bir "etkin olmayan bölüm" tanımlaması için bir topal tarayıcıya/aygıta sahip olması durumunda, sürükleme eylemi için bir "tanıtıcı" sağlamak ... (kemanın oku gibi)

kaynak

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

kaynak

2013-07-15 14:12:24 user2583831

Bunun için çalışan bir jsfiddle oluşturabilir misiniz? – Ruben

Gist mükemmel çalışıyor: 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/

kaynak

2015-04-09 10:15:53

jQuery UI seçilebilir ve sıralanabilir Bu ne var

cevap

İlgili konular