2012-02-20 12 views
0

選択可能な要素を複製して別のタブに並べ替える必要がある場合、次のコードを実行しようとしました。しかし、選択可能なノードはまったくクローンされず、代わりに削除され、ソート可能に追加されます。タブでJQueryのドラッグ&ドロップでノードがクローンされない

<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> 

任意のアイデア:ここでは、コードですか?

+0

単純なui.draggable.clone()を使用すると、最終的に機能しました。 – michael

答えて

0

簡単にはui.draggable.clone()となりました。

関連する問題