jQueryUIで複数のドラッグ可能なアイテムを即座に選択する

Question

jQueryUIのドラッグ可能な機能を使用して、選択した要素だけでなく、選択した要素に続くすべての兄弟を取得しようとしています。

例：私は一番上の時間帯とその横の従業員のリストを持つテーブルを持っています。各従業員は特定の患者にケアを提供する責任があります。しかし、もし1人の従業員が4月と言えば、午後1時に呼び出されれば、最初の予定を逃して、それをドラッグし、すべての予定をブリジットの列までドラッグすることができる必要があります。 4月が戻ったら、午後2時からブリジットから任命を受け取り、4月のアポイント・ブックに戻すことができます。

デフォルトのjQueryUIを使用すると、15分の予定のそれぞれを個別にドラッグする必要があります。いくつかのマルチドラグ可能な実装を見てきましたが、イベントが発生する前にユーザーが複数の項目を選択していることが原因です。私はイベントを発生させたいと思っていましたし、 "start"や何らかのメソッドが自動的に選択された要素の後に兄弟を選択するようにしていました。

これは可能ですか？

Answer 1

私はしばらく時間があったので、これを行う方法の基本的な例があります。

実施例：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"); 
    } 
    }); 
}); 

基本的に、各リストアイテムはドラッグ可能です。 1つのドラッグされたアイテムの時間または選択されたアイテムを含むヘルパーを作成します。これはスケジュール内のスロットにドラッグされます。