jQuery Multi-Select Dragable/Sortierbar

Question

Ich arbeite an einer Drag-& Drop-Seite, die es einem Benutzer ermöglicht, Felder aus einer Quellenliste auszuwählen und sie in ihrer Auswahl einer Zielliste ablegen.

Während diese Funktionalität auf einem hohen Niveau funktioniert, versuche ich, die Erfahrung ein wenig besser zu machen, indem mehrere Felder zur gleichen Zeit ausgewählt und verschoben werden können.

Sortable:

$('#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() 
}, 
.... 

Dropzone:

// 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', ''); 
     } 
    }, 
    .... 

Mein Gedanke, es deutlich zu machen, für die Nutzer wäre eine Checkbox vor dem Etikett auf jedem Feld hinzuzufügen. Auf diese Weise konnten sie mehrere gleichzeitig prüfen und dann, wenn sie sie ziehen, würden sie alle ausgewählten verschieben.

Irgendwelche Gedanken über die beste Möglichkeit, dies zu nähern? Ich hatte Mühe, so weit mit dem Drag & Drop zu kommen, und ich bin ein wenig unsicher, wie ich dafür ein Multi-Select-Feature entwickeln könnte.

Fiddle: https://jsfiddle.net/839rvq2k/

Answer 1

Sie auf diese fiddle für die multisortable Merkmal der Bibliothek here

Verlängert jQueryUI sortierbar ermöglichen die Auswahl und Sortierung von mehreren Elemente https://github.com/shvetsgroup/jquery.multisortable

JS beziehen :

$(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>