Question

经过详尽的搜索过程，我希望StackOverflow上的某个人可以为我指明正确的方向。

场景：

我目前正在使用jQueryUI sortable来创建人员列表以及他们每周出勤的时间。我有几个div，它们连接了可排序的<ui >，而且效果很好。

在我的示例中，我列出了不同组中的员工。它们由<li>在可排序块中表示。他们必须是：

全角代表全职
60％的宽度，每周3天
每周2天兼职的比例为40％

到目前为止，对于CSS而言，仅将<li>的宽度分别标记为100％，60％和40％的宽度并正确显示所有问题就不是问题。

问题：

问题在于，这些区块必须能够允许40％+ 60％（反之亦然）的兼职职位排成一排，以表明已占用全职时间。

应用程序的用户需要让UI指示他们需要填充多少个空插槽，因此它必须是虚拟证明（即不使用文本）。视觉提示是最好的。

目标是能够解决这个问题

| Jane                |
| John      |
| Joe   |

对此：

| Jane                |
| John      | | Joe   |

尽管我在网站上大量使用jQuery，但我并不愿意使用jQueryUI和/或sortable。

如果有人遇到类似问题或有任何想法，那将非常有帮助。我不是在索要代码，只是在索取想法，或者您是否熟悉可能会有所帮助的其他库。

谢谢。

编辑-小提琴：https://jsfiddle.net/xpvt214o/783063/

Answer 1

您将需要在HTML中添加更多结构，以便在移动项目时实际上只是在移动容器。

例如：https://jsfiddle.net/Twisty/0hkn2Lbu/

HTML

<h4 style="display:inline">Monday</h4>
<ul id="class_1" class="list-unstyled connectedSortable ui-sortable">
  <li class="panel ui-sortable-handle" id="emp_1801">
    <div class="emp-time">
      <span class="time-block dpw_5">&nbsp;</span>
      <span class="name-label">Allan</span>
    </div>
  </li>
  <li class="panel ui-sortable-handle" id="emp_1822">
    <div class="emp-time">
      <span class="time-block dpw_5">&nbsp;</span>
      <span class="name-label">Becca</span>
    </div>
  </li>
</ul>
<hr>
<h4 style="display:inline">Tuesday</h4>
<ul id="class_2" class="list-unstyled connectedSortable ui-sortable">
  <li class="panel ui-sortable-handle" id="emp_1811">
    <div class="emp-time">
      <span class="time-block dpw_3">&nbsp;</span>
      <span class="name-label">Charlie</span>
    </div>
  </li>
  <li class="panel ui-sortable-handle" id="emp_1823">
    <div class="emp-time">
      <span class="time-block dpw_2">&nbsp;</span>
      <span class="name-label">Diane</span>
    </div>
  </li>
</ul>

这还意味着添加更多CSS以根据需要对其进行样式设置。我将标签放在块的顶部。

CSS

.emp-time {
  position: relative;
  width: 100%;
}

.name-label {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  padding-left: 5px;
}

.time-block {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}

.dpw_5 {
  width: 100%;
  background-color: #fff;
}

.dpw_3 {
  width: 60%;
  background-color: #ccc;
}

.dpw_2 {
  width: 40%;
  background-color: #999;
}

这使得处理大量物品变得更简单。除了将其包装外，您的JavaScript并未进行任何更改。

JavaScript

$(function() {
  var panelList = $("#class_1, #class_2, #class_3, #class_4, #class_5, #class_6, #class_7, #class_8, #class_12");

  panelList.sortable({
    connectWith: ".connectedSortable",
    forcePlaceholderSize: true,
    placeholder: "panel sortable-placeholder",
    stop: function(event, ui) {
      var class_obj = {};
      var class_id = 0;
      panelList.each(function(class_index, class_element) {
        class_id = $(class_element).attr("id").slice(6);
        class_obj[class_id] = [];
        $("#class_" + class_id + " li").each(function(child_index, child_element) {
          class_obj[class_id].push($(child_element).attr("id").slice(6));
        })
      });
      $.post('enrollment_ajax.php', {
        action: "saveData",
        location_id: "'.$location_id.'",
        month: "'.$month_time.'",
        data: JSON.stringify(class_obj)
      });
    }
  });
});

希望有帮助。

现在要允许它们进行内联，您可以考虑以下内容：

https://jqueryui.com/sortable/#display-grid

但是我怀疑这对您不起作用。听起来您需要更多的拖放方案。如果员工可以工作的最小小时数是10小时轮班中的2小时，则分别是20％，4小时：40％，6小时：60％和10小时：100％。

这将定义每天可以包含5个时间段。因此，一个容器将能够包含0到最多5个时间块。由于我们要拖一部分时间，所以它们每个都有一个值和一个可视队列。

示例：

+ -- -- -- -- -- +
| A (5)          |
+ -- -- -- -- -- +
| B (3)   | C (2)|
+ -- -- -- -- -- +

每个容器都是一个放置区域，但是它将检查每个放置区域，并且最多允许值为5。您也可以使用Sortable（每天都是可排序列表）来进行此操作，并检查更新以确保我们拥有没填满。要做起来有点困难。

我将用一个更好的例子来更新此案。

更新1

https://jsfiddle.net/Twisty/0hkn2Lbu/14/

在这里您可以看到列表的内联排序。

同一行上有多个jQueryUI可排序对象

1 个答案: