How to get dropped element in a jquery sortable list [重复]

Question

我有两个无序列表，我希望能够将第一个列表中的任何元素的副本拖到新的第二个列表中。删除该项目时，我想访问该元素，以便将其添加到数据库等

我期望能够使用 ui.item 访问它，但这是从第一个列表访问原始项目。

我不想在可排序的停止或更改功能中访问它，因为如果列表被重新排序，我不希望它运行我的代码。我只想在第一次放下该项目时运行我的代码。

我要么需要在停止或更改中获取新元素，然后将变量传递给接收事件，要么我想直接从那里访问它。

我已经尝试了我所知道的一切，但无法做到。

$("#sortable").sortable({
  receive: function(event, ui) {
    // this is the original item, not the new clone.
    var thisItem = ui.item;
  },
  revert: true

});
$(".draggable").draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  revert: "invalid"
});
$("ul, li").disableSelection();

#sortable { border: 1px solid green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" ></script>

<ul id="options">
  <li class="draggable">Option 1</li>
  <li class="draggable">Option 2</li>
</ul>

<ul id="sortable">
<li>Drag to here</li>
</ul>

Answer 1

您可以使用 ui.item 访问它，只需指定 ul id

像这样的东西：

$("#sortable li")

这将给出可排序的 ul li 数组

另一种方法是创建一个隐藏的输入字段并添加选项。通过这个提交，您将获得隐藏文件的所有值并使用它来将值保存在数据库中。

<input type="hidden" name="selectedOption[0]" value="option1" />
<input type="hidden" name="selectedOption[1]" value="option1" />
<input type="hidden" name="selectedOption[2]" value="option1" />

你会得到一个 selectedOption 作为数组