在将项目放入 jQuery 的可排序列表中时修改项目的属性

Question

我有一个项目列表，这些项目可以从源列表拖动到包含在表单元素中的目标列表。这适用于一个目标列表，因为可以静态指定 'name' 属性。但是，我正在尝试找出一种支持多个目标列表的方法，并且我认为如果我可以从目标列表中获取 ID 并将其作为名称属性动态添加到输入字段中，因为它被放入可排序列表，每个列表可以作为单独的数组提交。我的可排序、可拖动和可放置功能完全按照我希望的方式工作，代码如下：

    <div>
      Available Items
      <ul id="avail">
        <li><input type="hidden" name="options[]" value="1">Option 1</li>
        <li><input type="hidden" name="options[]" value="2">Option 2</li>
        <li><input type="hidden" name="options[]" value="3">Option 3</li>
        <li><input type="hidden" name="options[]" value="4">Option 4</li>
      </ul>
    </div>
    <p class="clear"></p>
    <form action="myForm.php" method="post" enctype="multipart/form-data">
      <div style="float:left;">
        List #1
        <ul class="sortable" id="list1">
        </ul>
      </div>
      <div style="float:left;margin-left:5px;">
        List #2
        <ul class="sortable" id="list2">
        </ul>
      </div>
      <div class="clear"></div><br>
    </form>

以及以下 jQuery：

    $('#avail li').draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      opacity: 0.75,
    });
    var sortableIn;
    $('.sortable').sortable({
      receive: function(event, ui) {
        sortableIn = 1;
      },
      over: function(event, ui) {
        sortableIn = 1;
      },
      out: function(event, ui) {
        sortableIn = 0;
      },
      beforeStop: function(event, ui) {
        if (sortableIn == 0) {
          ui.item.remove();
        }
      }
    }).droppable({
      greedy: true
    });

您可以在 this fiddle 上看到它的实际效果。因此，基于此示例进行总结，当将选项放入其中一个列表时，我尝试将 'option[]' 替换为 'list1[]' 或 'list2[]' 作为输入字段的名称属性.

我假设我需要在 "receive" 函数或 "drop" 函数，但我不确定将它放在哪里以及如何将输入字段定义为 attr() 更改的目标而不是包含 <li>.

解决方案： 我将 receive 函数更改为 update 并向其中添加了 Twisty 的第二个代码片段，现在它看起来像：

update: function(event, ui) {
   sortableIn = 1;
   ui.item.find("input").attr("name", $(this).attr("id") + '[]');
}

Answer 1

我会把它放在目标元素的 data-list 属性中。例如：

<ul class="sortable" id="list1" data-list="1">
</ul>

<ul class="sortable" id="list2" data-list="2">
</ul>

然后在receive中，可以给name属性赋值：

ui.item.find("input").attr("name", "list" + $(this).data("list") + "[]");

或者您可以读取 ID：

ui.item.find("input").attr("name", $(this).attr("id") + "[]");

这将导致收到的物品具有以下任一特征：

name="list1[]"
name="list2[]"

由于 $(this) 将是元素被拖动到的可排序列表，因此将从数据中为其分配列表编号。

在将项目放入 jQuery 的可排序列表中时修改项目的属性

Modifying attributes of items as they are dropped into a sortable list with jQuery

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-sortable

jquery-ui-droppable