jQuery UI的選擇和排序加起來

這是我得到：
http://jsfiddle.net/hashie5/vk6rZ/
（不介意佈局）jQuery UI的選擇和排序加起來

第一個表是第二和第三臺的組合，它是這一個是需要完成。

秒錶可排序（帶箭頭）。

第三個表格可選（不要點擊箭頭）。

目標是：當您選擇多個項目時，您應該能夠同時對所有項目進行排序。

如果因爲表格而導致困難，帶有列表的例子也會很好。

在輔助功能我想克隆所有選擇（UI選擇類）項目，但這是漏洞太多

編輯：
我創建了一個新的小提琴：http://jsfiddle.net/hashie5/AZr9Z/
這工作不錯，但它不是100％完成尚未

來源

2012-06-12 Ruben

檢查這個插件：https://github.com/iamvery/jquery.multisortable這問題有一個解決方案，使用可拖動和droppable：http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items – jfrej

謝謝，但我仍然想使用可排序和selectab le有所有可用的功能 – Ruben

@Ruben：嗨，你說克隆是越野車，但你看到我的例子嗎？它對我很好。你怎麼看？ –

演示http://so.devilmaycode.it/jquery-ui-selectable-and-sortable-combined/

主要的代碼看起來像下面。

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

我不知道我理解你想要什麼，反正什麼代碼實際上做的是：

，選擇多個項目;
通過按住懸停其中一個選定項目;
您可以在列表中將所選的任意位置移動;
維護所有選定項目的排序順序;

希望這是你在找什麼。由馬修·安德森創建

來源

2012-06-22 08:59:20

我認爲這就是它！我現在不在工作，但我會更好地看待明天，很好 – Ruben

任何想法如何擴展佔位符，所以如果我選擇2項，我的佔位符將有2 標籤？ – Ruben

我該如何給予賞金？ – Ruben

香港專業教育學院沒有測試過這一點，但這裏是一個想法：

有第一個列表選擇（但不排序） - 那麼當選擇完成後，包裹選擇在一個div，然後進行那個div可排序 - 通過這種方式，選擇應該作爲一個拖動。

來源

2012-06-16 11:41:34 Jimmery

聽起來像一個偉大的想法，但我不知道如何去:) – Ruben

AFAICT你「的jsfiddle」作品不錯......但每當我的jQuery UI的沮喪在選擇文本與whatyever否則它應該做的煩人的堅持，我指的這個片段..

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

不知道您是否可以將「禁用」翻轉爲「啓用」，但是我的$ .02。此外，它的一個好主意，以防某人有一個蹩腳的瀏覽器/設備可能在同一個「group」元素中定義一個「非活動部分」，爲拖動動作提供一個「句柄......」（就像你的小提琴的箭頭型，東西），或者那些點擊，可能無情地被誤認爲是意圖選擇/編輯...

來源

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

來源

2013-07-15 14:12:24 user2583831

你能爲此創建一個工作jsfiddle嗎？ – Ruben

吉斯特完美的作品：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>

演示：http://jsfiddle.net/ghaq69b3/

來源

2015-04-09 10:15:53

jQuery UI的選擇和排序加起來

回答

相關問題