Auswählen von mehreren ziehbaren Elementen im laufenden Betrieb in jQueryUI

Question

Ich versuche, die Draggable-Funktion von jQueryUI zu verwenden, um nicht nur das ausgewählte Element zu ziehen und es herumzuziehen, sondern auch alle Geschwister, die dem ausgewählten Element folgen.

Beispiel: Ich habe eine Tabelle mit den Stunden des Tages über die Spitze und eine Liste von Mitarbeitern auf der Seite. Jeder Mitarbeiter ist für die Versorgung bestimmter Patienten verantwortlich. Aber wenn ein Angestellter, sagen wir April, um 13 Uhr weggerufen wird, muss ich in der Lage sein, ihren ersten Termin zu nehmen, den sie verpassen werden, und ihn und alle folgenden Termine einfach in die Reihe von Bridget ziehen. Wenn der April zurückkommt, kann ich die Termine von Bridget ab 14 Uhr in Anspruch nehmen und sie zurück in den Terminkalender von April ziehen.

Mit der Standard-jQueryUI, musste ich jeden der 15-Minuten-Termine einzeln ziehen. Ich habe mir einige der mehrfach ziehbaren Implementierungen angeschaut, aber alle scheinen davon abhängig zu sein, dass der Benutzer mehrere Elemente auswählt, bevor das Ereignis ausgelöst wird. Ich wollte in der Lage sein, das Ereignis auszulösen, dann haben die "Start" oder eine Methode automatisch die Geschwister nach dem gewählten Element auszuwählen.

Ist das möglich?

Answer 1

Da ich etwas Zeit hatte, hier ist ein grundlegendes Beispiel für eine Möglichkeit, dies zu tun.

Arbeitsbeispiel: https://jsfiddle.net/Twisty/wmjt1v7s/

HTML

<div class="ui-widget"> 
    <div class="ui-widget-header">Times</div> 
    <ol id="select-times" class="ui-widget-content"> 
    <li class="ui-widget-content">01:00</li> 
    <li class="ui-widget-content">02:00</li> 
    <li class="ui-widget-content">03:00</li> 
    <li class="ui-widget-content">04:00</li> 
    <li class="ui-widget-content">05:00</li> 
    <li class="ui-widget-content">06:00</li> 
    <li class="ui-widget-content">07:00</li> 
    <li class="ui-widget-content">08:00</li> 
    <li class="ui-widget-content">09:00</li> 
    <li class="ui-widget-content">10:00</li> 
    <li class="ui-widget-content">11:00</li> 
    <li class="ui-widget-content">12:00</li> 
    <li class="ui-widget-content">13:00</li> 
    <li class="ui-widget-content">14:00</li> 
    <li class="ui-widget-content">15:00</li> 
    <li class="ui-widget-content">16:00</li> 
    <li class="ui-widget-content">17:00</li> 
    <li class="ui-widget-content">18:00</li> 
    <li class="ui-widget-content">19:00</li> 
    <li class="ui-widget-content">20:00</li> 
    <li class="ui-widget-content">21:00</li> 
    <li class="ui-widget-content">22:00</li> 
    <li class="ui-widget-content">23:00</li> 
    <li class="ui-widget-content">24:00</li> 
    </ol> 
    <div class="ui-widget-header">Schedules</div> 
    <ol id="schedules" class="ui-widget-content"> 
    <li class="ui-widget-content"> 
     <label>April</label> 
     <div class="drop-times"> 
     </div> 
    </li> 
    <li class="ui-widget-content"> 
     <label>Linda</label> 
     <div class="drop-times"> 
     </div> 
    </li> 
    <li class="ui-widget-content"> 
     <label>Barry</label> 
     <div class="drop-times"> 
     </div> 
    </li> 
    <li class="ui-widget-content"> 
     <label>Ellen</label> 
     <div class="drop-times"> 
     </div> 
    </li> 
    </ol> 
</div> 

CSS

#feedback { 
    font-size: 1.4em; 
} 

#select-times .ui-selecting { 
    background: #FECA40; 
} 

#select-times .ui-selected { 
    background: #F39814; 
    color: white; 
} 

#select-times { 
    list-style-type: none; 
    margin: 0; 
    padding: 8px 12px; 
} 

.group-times { 
    border: 1px dashed #ccc; 
    background: #fff; 
    font-size: 1.25em; 
    padding: 2px; 
} 

#schedules { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

#schedules label { 
    display: inline-block; 
    float: left; 
    margin-top: .5em; 
    margin-left: 4px; 
    width: 56px; 
} 

#schedules .drop-times { 
    display: block; 
    border: 1px dashed #ccc; 
    width: 75%; 
    height: 2em; 
    margin: 4px; 
    margin-left: 60px; 
} 

#select-times li { 
    display: inline-block; 
    margin: 3px 4px; 
    padding: 2px; 
    font-size: 1.25em; 
    width: 60px; 
    text-align: center; 
} 

JavaScript

$(function() { 
    var selected = []; 
    $("#select-times > li").draggable({ 
    helper: function() { 
     var $group = $("<div>", { 
     class: "group-times" 
     }); 
     if (selected.length) { 
     $group.html(selected.join(", ")); 
     console.log("Helper: ", $group); 
     } else { 
     $group.html($(this).text()); 
     } 
     return $group; 
    } 
    }); 
    $("#select-times").selectable({ 
    selected: function(e, ui) { 
     $(ui.selected).each(function() { 
     selected.push($(this).text()); 
     }); 
    } 
    }); 
    $(".drop-times").droppable({ 
    drop: function(e, ui) { 
     $(this).html($(ui.helper).text()); 
     $(ui.helper).remove(); 
     $(".ui-selected").removeClass("ui-selected"); 
    } 
    }); 
}); 

Grundsätzlich ist jedes Listenelement ziehbar. Wir erstellen einen Helfer, der die Zeit des gezogenen Gegenstands oder der ausgewählten Gegenstände enthält. Dies wird dann in einen Slot im Zeitplan gezogen.