jquery可拖动到可排序的 strip 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/

更新

由 emulite 编辑 为了保护 DOM 的完整性，我使用了属性“ref”来根据上面修改后的 HTML 传递值，并修改了答案以获取该值。这使得它工作得非常漂亮

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