Selecting multiple draggable items on the fly in jQueryUI

Question

I'm trying to use jQueryUI's Draggable feature to grab not only the selected element and drag it around, but also all the siblings that follow the selected element.

Example: I have a table with the hours of the day across the top, and a list of employees down the side. Each employee is responsible for giving care to certain patients. But if one employee, let's say April, is called away at say 1pm, I need to be able to grab their first appointment that they will miss and just drag it and all following appointments down to Bridget's row. If April comes back, I can grab the appointments from Bridget starting at 2pm, and drag them back to April's appointment book.

Using the default jQueryUI, I would have to drag each of the 15-minute appointments individually. I've looked at some of the multi-draggable implementations, but all seem to be dependent on the user selecting multiple items before the event fires. I was wanting to be able to fire the event, then have the "start" or some method automatically select the siblings after the chosen element.

Is this possible?

Answer 1

Since I had some time, here is a basic example of one way you could do this.

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

Basically, each list item is draggable. We make a helper that contains the time of the one dragged item or the selected items. This is then dragged into a slot in the schedule.