1

第一个问题，所以请接受我的道歉，如果这里有什么违反礼节的话，请告诉我

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

  1. 接受 jpg、gif 和 png
  2. 接受 png
  3. 接受 jpg、gif 和 png
  4. 接受 pdf

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

这是一个演示我的设置的小提琴。

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>

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

4

1 回答 1

0

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

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

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

于 2013-03-04T23:56:20.220 回答