jQuery多選可拖拽/可排序

我正在做一個拖拽&拖放頁面，它允許用戶從源列表中選擇字段並將它們放入選擇的目標列表中。jQuery多選可拖拽/可排序

雖然此功能在高層次上工作，但我試圖通過允許同時選擇多個字段並移動，使體驗更好一些。

可排序：

$('#in_available_fields').sortable({ 
connectWith: '.sortable-list', 
placeholder: 'placeholder', 
start: function(event, ui) { 
    if (!$(ui.item).hasClass("allowPrimary")) { 
    $(".primaryPanel").removeClass('panel-primary').addClass("panel-danger"); 
    } 
    if (!$(ui.item).hasClass("allowSecondary")) { 
    $(".secondaryPanel").removeClass('panel-primary').addClass("panel-danger"); 
    } 
    if (!$(ui.item).hasClass("allowExport")) { 
    $(".exportPanel").removeClass('panel-primary').addClass("panel-danger"); 
    } 
    checkFields() 
}, 
....

懸浮窗：

// Enable dropzone for primary fields 
    $('.primaryDropzone').sortable({ 
    connectWith: '.sortable-list', 
    placeholder: 'placeholder', 
    receive: function(event, ui) { 
     // If we dont allow primary fields here, cancel 
     if (!$(ui.item).hasClass("allowPrimary")) { 
     $(ui.placeholder).css('display', 'none'); 
     $(ui.sender).sortable("cancel"); 
     } 
    }, 
    over: function(event, ui) { 
     if (!$(ui.item).hasClass("allowPrimary")) { 
     $(ui.placeholder).css('display', 'none'); 
     } else { 
     $(ui.placeholder).css('display', ''); 
     } 
    }, 
    ....

我的想法，要清楚用戶將是對每個字段的標籤前添加一個複選框。這樣他們可以一次檢查多個，然後當他們拖動它們時，它將移動所有選定的部分。

任何想法的最佳方法來解決這個問題？我努力通過拖放來實現這一目標，我對如何爲此提供多選功能還有點不確定。

小提琴：https://jsfiddle.net/839rvq2k/

來源

2016-11-09 SBB

您可以參考這個fiddle圖書館here

的multisortable功能擴展jQueryUI的排序允許選擇和多重排序元素https://github.com/shvetsgroup/jquery.multisortable

JS ：

$(function(){ $('ul.sortable').multisortable(); });

HTML：

<h2>List 1</h2> 
    <ul id="list1" class="sortable"> 
     <li>Item 11</li> 
     <li>Item 12</li> 
     <li class="child">Item 12a</li> 
     <li class="child">Item 12b</li> 
     <li>Item 13</li> 
     <li>Item 14</li> 
     <li>Item 15</li> 
     <li>Item 16</li> 
     <li>Item 17</li> 
     <li>Item 18</li> 
     <li>Item 19</li> 
    </ul>

來源

2016-11-09 16:48:51 RonyLoud

jQuery多選可拖拽/可排序

回答

相關問題