删除后如何将属性添加到新的 LI答案

【问题标题】：How can I add an attribute to a new LI after dropping删除后如何将属性添加到新的 LI
【发布时间】：2011-08-09 00:15:49
【问题描述】：

我有 2 个列表：

<h3>Available page layouts</h3>

<ul id="pagepool" class="connectedSortable">
    <li id="I1" class="ui-state-default"></li>
    <li id="I2" class="ui-state-default"></li>
    <li id="I3" class="ui-state-default"></li>
    <li id="I4" class="ui-state-default"></li>
    <li id="I5" class="ui-state-default"></li>
</ul>

<h3>Document structure</h3>

<ul id="docstruct" class="connectedSortable"></ul>

“pagepool”列表中的项目被拖（克隆）到“docstruct”列表中，然后可以手动排序。 docstruct 列表中可能存在重复的页面样式（具有重复的 id 属性）。

我想做的是通过 php 文件/ajax 请求一个唯一的 md5 哈希，并在删除项目后将该哈希添加到被删除项目的 rel 属性中。到目前为止，我尝试的所有内容都会更新“pagepool”原始项目。

如何修改它以仅针对克隆项目？：

$( "#pagepool li" ).draggable({

           connectToSortable: '#docstruct',
           helper: 'clone',
           revert: 'invalid',
           opacity: '.7'

                              });

$( "#docstruct" ).sortable({
           placeholder: "ui-state-highlight",
           revert: true,
           receive: function(event, ui) {
           $.get('ajax/uniqid.php', function(data){ui.item.attr('rel', data)})     
                                                }       
                          });

【问题讨论】：

首先，您的 HTML 中没有两个元素可以共享同一个 ID。就在前面，这几乎会破坏一切。二、MD5的意义何在？
同意 Adam - 我认为可排序/可拖动插件最有可能使用 id 来定位元素，因此为什么选择了错误的。您可以为每个 li 使用不同于“id”的属性吗？ HTML5 提供了 data-{something} 属性来保存诸如 id 之类的东西。
+1 为亚当和哇。你也不应该使用'rel'属性，据我所知，它只对'a'和'link'标签有效。改用 ui.item.data("hash", data) 之类的东西。
这么简单吧？！将 id 移到课堂上，它工作得很好，谢谢！
md5的原因是我这里设置了文档大纲；每个页面都有一个关联的记录对象（保存字段数据），最终将与哈希一起存储在数据库中。我需要一些方法来识别将来新创建的页面，以促进排序顺序更新等

标签： jquery jquery-ui clone jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

不知道为什么会这样，但这是我发现的。

在接收事件中，您无法访问可排序列表中正在创建的实际项目。 Helper 指向一个仅用于拖动的克隆，item 是您点击拖动的原始项目。

但是，beforeStop 事件在接收事件之前触发。在 beforeStop 中，item 实际上就是列表中的 item。因此，在 beforeStop 中，您可以保存该项目，然后在接收中使用它。

在这里演示：http://jsfiddle.net/kcg29/

【讨论】：