在 jQueryUI 中动态选择多个可拖动项目

Question

我正在尝试使用 jQueryUI 的 Draggable 功能来抓取所选元素并拖动它，还可以抓取所选元素后面的所有兄弟姐妹。

示例：我有一张表格，顶部是一天中的时间，旁边是员工列表。每个员工都有责任照顾某些患者。但是，如果一个员工，比如说四月，在下午 1 点被叫走，我需要能够抓住他们会错过的第一个约会，然后将它和所有后续约会拖到布里奇特的行。如果 April 回来，我可以从下午 2 点开始从 Bridget 那里获取约会，然后将它们拖回 April 的约会簿。

使用默认的 jQueryUI，我必须单独拖动每个 15 分钟的约会。我查看了一些多可拖动实现，但似乎都依赖于用户在事件触发之前选择多个项目。我希望能够触发事件，然后让“开始”或某种方法在所选元素之后自动选择兄弟姐妹。

这可能吗？

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

基本上，每个列表项都是可拖动的。我们制作了一个帮助器，其中包含一个拖动项目或选定项目的时间。然后将其拖到时间表中的一个槽中。