Question

第一个问题，所以请接受我的道歉并告诉我这里是否有任何违反礼仪的行为

我正在使用具有可变数量的文件上传字段的CMS页面编辑表单，但是出于这个问题的目的，假设有4个名为 slots 的上传字段。每个插槽只能接受某些类型的文件，例如：

接受jpg，gif＆amp; PNG
接受png
接受jpg，gif＆amp; PNG
接受pdf

我想允许用户重新安排上传的文件，并使用jQuery UI的Sortable来完成此任务。这就是我被困的地方。在拖动时，只应在具有相应文件类型的插槽中允许文件。因此，插槽1中的jpg文件只能移动到插槽3，而插槽3中的png文件可以移动到插槽1或插槽2.插槽4中的pdf根本不允许移动。

Here's a fiddle展示了我的设置。

jQuery的：

$(".slots").sortable({
  cursor: "move",
  placeholder: 'ui-state-highlight',
  items: ".slot",
  update: function (sorted) {
    // ajax magic omitted for the sake of brevity.
  }
});

HTML：

<ul class="slots">
  <li class="slot accept-jpg accept-gif accept-png" id="sort_1">
    <div class="is-jpg">{jpg}</div>
  </li>
  <li class="slot accept-png" id="sort_2">
    <div class="is-png">{png}</div>
  </li>
  <li class="slot accept-jpg accept-gif accept-png" id="sort_3">
    <div class="is-empty"><input type="file" /></div>
  </li>
  <li class="slot accept-pdf" id="sort_4">
    <div class="is-pdf">{pdf}</div>
  </li>
</ul>

有什么想法/想法吗？提前感谢您的帮助！

Answer 1

您可以尝试连接已连接列表上的接收/结束事件。有关类似问题，请参阅此处https://stackoverflow.com/a/14442218。

但我不知道你可能会遇到哪些边缘情况。

在这里查看http://johnny.github.com/jquery-sortable/#limited-target以获取另一个可排序的插件，让您可以完全控制哪些容器接收到丢弃的插件。但由于它不支持网格，它可能不适合你。

jQuery UI Sortable：根据条件限制允许下降

1 个答案: