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

我尝试使用jQueryUI的可拖动特性，不仅可以抓取选定元素并将其拖动，还可以抓取选定元素后面的所有同级元素

我有一张桌子，上面是一天的工作时间，下面是一份员工名单。每位员工都有责任照顾某些患者。但如果一名员工，比如说四月，在下午1点被叫走，我需要能够抓住他们将错过的第一个约会，然后把它和所有后续约会拖到布里奇特的那排。如果April回来，我可以从下午2点开始从Bridget那里拿到约会，然后把它们拖回April的约会簿

使用默认的jQueryUI，我必须分别拖动15分钟的约会。我已经研究了一些多拖动的实现，但是它们似乎都依赖于用户在事件触发之前选择多个项目。我希望能够触发事件，然后让“开始”或某些方法自动选择所选元素后的兄弟元素

---

这可能吗？

因为我有一些时间，这里是一个基本的例子，说明了一种方法可以做到这一点

工作示例：

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>

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

$（函数（）{
所选var=[]；
$（“#选择时间>li”）。可拖动({
助手：函数（）{
变量$group=$（“”{
班级：“团体时间”
});
如果（选定。长度）{
$group.html（selected.join（“，”）；
log（“Helper:”，$group）；
}否则{
$group.html（$（this.text（））；
}
返回$group；
}
});
$（“#选择时间”）。可选({
所选：功能（e、ui）{
$（ui.selected）。每个（函数（）{
已选择.push（$（this.text（））；
});
}
});
$（“.drop times”）.dropable({
drop：函数（e、ui）{
$（this.html（$（ui.helper.text（））；
$（ui.helper）.remove（）；
$（.ui选中”）.removeClass（“ui选中”）；
}
});
});

---

基本上，每个列表项都是可拖动的。我们制作一个助手，其中包含一个拖动项目或选定项目的时间。然后将其拖到日程安排中的某个时段。

因为我有一些时间，下面是一个基本示例，说明了一种方法

工作示例：

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>

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

$（函数（）{
所选var=[]；
$（“#选择时间>li”）。可拖动({
助手：函数（）{
变量$group=$（“”{
班级：“团体时间”
});
如果（选定。长度）{
$group.html（selected.join（“，”）；
log（“Helper:”，$group）；
}否则{
$group.html（$（this.text（））；
}
返回$group；
}
});
$（“#选择时间”）。可选({
所选：功能（e、ui）{
$（ui.selected）。每个（函数（）{
已选择.push（$（this.text（））；
});
}
});
$（“.drop times”）.dropable({
drop：函数（e、ui）{
$（this.html（$（ui.helper.text（））；
$（ui.helper）.remove（）；
$（.ui选中”）.removeClass（“ui选中”）；
}
});
});

---

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

共享一些代码，以及到目前为止您尝试了什么？欢迎使用堆栈溢出。可以选择和拖动。请编辑您的帖子并包括您迄今为止尝试过的内容。共享一些代码和您迄今为止尝试过的内容？欢迎使用Stack Overflow。可以选择和拖动。请编辑您的帖子，并包括您迄今为止尝试过的内容。