带有标签的JQuery拖放不会克隆节点
Posted
技术标签:
【中文标题】带有标签的JQuery拖放不会克隆节点【英文标题】：JQuery drag & drop with tabs does not clone node 【发布时间】：2012-03-10 17:27:18 【问题描述】：我试图让以下代码工作，其中应克隆可选元素并将其附加到不同选项卡中的可排序元素。但是，可选择项中的节点根本没有被克隆，而是被删除并附加到可排序项中。代码如下：
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2 /jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="ui-lightness/jquery-ui-1.8.15.custom.css">
<script type="text/javascript">
$(function()
var $tabs = $('#tabs').tabs();
$( "#selectable" ).selectable();
$('li', '#selectable').draggable(
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid'
);
var $tab_items = $('ul:first li', $tabs).droppable(
accept : '#selectable li',
hoverClass : 'ui-state-hover',
drop : function(event, ui)
var $item = $(this);
var $list = $($item.find('a').attr('href')).find('.connectedSortable');
$tabs.tabs('select', $tab_items.index($item));
$(this).appendTo($list).show('slow');
);
$('#selectable, #sortable').disableSelection();
);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab-selectable">Tab1</a></li>
<li><a href="#tab-sortable">Tab2</a></li>
</ul>
<div id="tab-selectable">
<ul id="selectable">
<li id="e101" class="ui-state-default">Num 1</li>
<li id="e102" class="ui-state-default">Num 2</li>
<li id="e103" class="ui-state-default">Num 3</li>
<li id="e104" class="ui-state-default">Num 4</li>
<li id="e105" class="ui-state-default">Num 5</li>
</ul>
</div>
<div id="tab-sortable">
<ul id="sortable" class="connectedSortable ui-helper-reset">
</ul>
</div>
</div>
</div>
</body>
有什么想法吗？
【问题讨论】：
用一个简单的 ui.draggable.clone() 终于成功了。 【参考方案1】：用一个简单的ui.draggable.clone() 终于成功了。
【讨论】：
以上是关于带有标签的JQuery拖放不会克隆节点的主要内容，如果未能解决你的问题，请参考以下文章