jquery 可拖入可排序条 id

Question

我有一个来自“库”的标准文本项目列表，用户可以将其拖到可排序的列表中，这样他们就可以构建（和修改）自己的文档。这两个列表都是从 Ajax 调用创建的。请注意，我在捐赠者之前创建了接收列表，并且全部包含在 $(document).on 更改函数中

在这里检查了许多帖子后，我可以进行拖放操作，但该过程正在剥离被拖动元素的 id。这当然会破坏序列化和更新过程。

我正在使用 JQuery 1.10.2 和 JQueryUI 1.10.3，其中 connectWith 似乎已被 connectToSortable 取代

这是一个完整的例子（也在 jsFiddle：http://jsfiddle.net/Dy2Ft/8/）：

编辑：我已将第一个列表中的 id 更改为“ref”，并添加了一个停止事件来获取 ref 值（它这样做是因为我用警报对其进行了测试），然后尝试添加 id该项目的 ref 值，但它对原始而不是克隆进行更新。所以我仍然被困住了，但更进一步。至少不会有重复的ID

HTML：

<select id='confiss'>
    <option value='1'>Document One</option>
    <option value='2'>Document Two</option>
</select><br />    
<ul id="libry">
<li ref="listItem_1" class="phlis ui-draggable" >
<img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">
  This is the first test phrase
</li>
<li ref="listItem_2" class="phlis ui-draggable">
<img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">
  This is the second phrase
</li>
    <li ref="listItem_3" class="phlis ui-draggable" ><img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">This is the third phrase</li>
</ul>
    <div>The target list is below me</div><br />
<ul id="contphrss" class="ui-sortable sort-list"><li id="listItem_0" class="phlis ui-draggable" ><img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">This is a false placeholder</li>
</ul>

CSS：

.sort-list li {
    display: block;
    padding: 3px 3px; margin-bottom: 3px;
    background-color: #efefef;
}

.sort-list li img.handle {
    margin-right: 20px;
    cursor: move; 
}
.phlis{display: block;
    padding: 3px 3px; margin-top: 3px;
    background-color: #FFAAFF;}

JavaScript：

$('#contphrss').sortable({
    handle: '.handle',
    update: function () {
        var order = $('#contphrss').sortable('serialize');
        var contr = "&cont=" + $('#confiss option:selected').val();

    }
});
$('.phlis').draggable({
    cursor: 'move',
    helper: 'clone',
    opacity: 0.45,
stop: function(event,ui){
var newid =$(this).attr('ref');
$(this).attr('id',newid );
},
    connectToSortable: '#contphrss'
});

Answer 1

如果您希望 ID 保留在克隆中，这是一种方法。

var id = '';
$('#contphrss').sortable({
    handle : '.handle', 
    update : function (event, ui) { 
        ui.item.attr('id',id);   
        var order = $('#contphrss').sortable('serialize');
        var contr="&cont="+$('#confiss option:selected').val();

    },
    receive: function (event, ui) {
        id = ui.sender.attr('id');    
    }
});

例子

http://jsfiddle.net/trevordowdle/Dy2Ft/10/

更新

由emulit编辑为了保护DOM的完整性，我使用属性'ref'根据上面修改过的HTML传递值，并修改了答案以获取它。这使它工作得很好

id = ui.sender.attr('ref');