Question

我正在尝试使用jQueryUI的Draggable功能不仅可以抓取所选元素并将其拖动，还可以抓住所选元素后面的所有兄弟。

示例：我有一张桌子，上面列出了一天中的小时数，以及一份员工名单。每位员工都有责任照顾某些患者。但是，如果一个员工，比如四月，在下午1点被叫去，我需要能够抓住他们将错过的第一个约会，然后将它和所有随后的约会拖到布里奇特的行。如果四月回来，我可以从下午2点开始从布里奇特那里获得约会，并将它们拖回四月的预约簿。

使用默认的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");
    }
  });
});

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

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

1 个答案: