jQuery:可拖动连接到可排序.可拖动项与可排序列表具有不同的DOM [英] jQuery: draggable connect to sortable. draggable item has a different DOM from sortable list
问题描述
我现在可以将一个项目拖到一个可排序的项目中.但是可排序列表具有不同的DOM.
I am now able to drag an item to a sortable. But the sortable list has a different 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'
});
});
助手具有以下内容: xxx 这应该放入可排序的...
The Helper has this: xxx This should be dropped into the sortable...
助手"起作用.但是,当我将项目放入"可排序的项目时,它只是恢复为原始" DOM.我希望将新创建的DOM"(在帮助程序中创建的DOM)放入可排序对象中.
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.
我希望我有道理.谢谢!
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..
推荐答案
$('.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))
}
});
这篇关于jQuery:可拖动连接到可排序.可拖动项与可排序列表具有不同的DOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!