jQuery：draggable 连接到 sortable。可拖动项目与可排序列表具有不同的 DOM
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/741226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: draggable connect to sortable. draggable item has a different DOM from sortable list
提问by wenbert
I am now able to drag an item to a sortable. But the sortable list has a different DOM.
我现在可以将项目拖动到可排序的。但是可排序列表具有不同的 DOM。
<!-- The draggable items. Has the "original" DOM in the LI tags. -->
<ul class="draggable_text">
<li><span>DRAG THIS A</span></li>
<li><span>DRAG THIS B</span></li>
</ul>
<!-- This list has a different DOM in the LI tags -->
<ul id="stagerows">
<li><p>This is a new DOM dragged from "DRAG THIS A"</p></li>
<li><p>This is a new DOM dragged from "DRAG THIS B"</p></li>
</ul>
$(document).ready(function() {
$('.draggable_text > li').draggable({
//helper:'clone',
helper: function(event, ui) {
return '<div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;">xxx</div>';
},
connectToSortable:'#stagerows'
});
$('#stagerows').sortable({
handle: '.drag_handle'
});
});
The Helper has this: xxx This should be dropped into the sortable...
Helper 有这个： xxx 这应该被放入 sortable...
The "helper" works. But when I "dropped" the item into the sortable, it just reverts back to the "original" DOM. I would want the "newly created DOM" (the one created in helper) to be dropped into the sortable.
“帮手”起作用了。但是当我将项目“放到”可排序中时，它只会恢复到“原始”DOM。我希望将“新创建的 DOM”（在 helper 中创建的）放入 sortable 中。
I hope I am making sense. Thank you!
我希望我说得有道理。谢谢！
Another way of saying it: when I drag an apple, it now turns into an orange. but when i drop it, it turns back into an apple..
另一种说法是：当我拖动一个苹果时，它现在变成了一个橙子。但是当我放下它时，它又变回了一个苹果..
采纳答案by wenbert
$('.draggable_text > li').draggable({
helper: function(event, ui) {
var type = $(this).find('.link_type').val();
return create(type,0);
},
connectToSortable:'#stagerows'
});
$('#stagerows').sortable({
handle: '.drag_handle',
placeholder: 'placeholder_sortable'
});
/**
* When item is dropped from the Add <Stuff>
*/
$('#stagerows').droppable({
drop: function(event, ui){
type = ui.draggable.find('.link_type').val();
ui.draggable.empty();
return ui.draggable.html(create(type,0))
}
});
