Question

我有一个来自“库”的标准文本项列表，用户可以将其拖入可排序列表，以便他们可以构建（和修改）自己的文档。两个列表都是从Ajax调用创建的。请注意，我已经在捐赠者之前创建了接收列表，并且它全部包含在$（文档）.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的完整性，我使用了属性＆＃39; ref＆＃39;根据上面修改过的HTML传递值并修改答案以便选择它。这使它工作得很漂亮

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

jquery可拖动成可排序的条带id

1 个答案: