JQuery 拖拽带选项卡的 drop 不会克隆节点

发布于 2025-01-07 10:37:45 字数 2065 浏览 1 评论 0原文

我尝试让以下代码工作，其中应克隆可选元素中的元素并将其附加到不同选项卡中的可排序元素。但是，来自 selectable 的节点根本不会被克隆，而是被删除并附加到 sortable 中。这是代码：

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

有什么想法吗？

原文

I tried to get the following code working where an element from a selectable should be cloned and appended to a sortable in a different tab. However, the node from the selectable is not cloned at all but instead removed and appended to the sortable. Here's the code:

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

Any ideas?

分享到QQ

分享到微博