0

为什么 jquery 可拖动克隆不“克隆”要添加到列表的元素的 id。列表标签 9-12 将自己克隆到 ul 标签 id=sortable (list tags 1-8) 中，这是正确的，目前如果我唯一要做的是将列表标签元素 9-12 添加到列表标签元素 1-8 它的 id单击按钮后，不会显示在我正在创建的 id 数组上，因此它只打印出 ids “1,2,3,4,5,6,7,8,9,10,11,12”。尽管我可以看到克隆已创建，但列表元素显示但它的 id 丢失了，我错过了什么吗？

我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable + Sortable</title>
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
    <script src="jquery-1.7.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>
    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.sortable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
    .demo li { margin: 5px; padding: 5px; width: 150px; }
    </style>
    <script>
    $(function() {
        $( "#sortable" ).sortable({
            revert: true,
        });
        $( "#containedSortable" ).sortable({
            revert: true,
            containment: "parent" 
        });

        $( "#draggable li" ).draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid",
        });
        $( "ul, li" ).disableSelection();
    });
    function listOrder()
    {
    var arr = $("ul li").map(function() { return $(this).attr('id') }).get();
    alert (arr);
    }
    </script>

</head>
<body>

<div class="demo">

<!--<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul> -->

<ul id="sortable">
    <li id="1" class="ui-state-default">Item 1</li>
    <li id="2" class="ui-state-default">
    Contained List:
    <ul id="containedSortable">
    <li id="3" class="ui-state-default">contained 3</li>
    <li id="4" class="ui-state-default">contained 4</li>
    <li id="5" class="ui-state-default">contained 5</li>
    </ul>
    </li>
    <li id="6" class="ui-state-default">Item 6</li>
    <li id="7" class="ui-state-default">Item 7</li>
    <li id="8" class="ui-state-default">Item 8</li>

</ul>

</div><!-- End demo -->

<button type="button" onclick="listOrder()">save list order</button>

<!--<div class="demo-description">
<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
</div><!-- End demo-description -->
<div class="demo">

<ul id="draggable">

<li id="9" class="ui-state-default">item 9</li> 
<li id="10" class="ui-state-default">item 10</li> 
<li id="11" class="ui-state-default">item 11</li> 
<li id="12" class="ui-state-default">item 12</li> 
</ul>
</div>
</body>
</html>
4

1 回答 1

0

尝试使用 refreshPositions。refreshPositions - 可排序

 $( "#containedSortable" ).sortable({
            revert: true,
            containment: "parent"
           refreshPositions: true;

        });
于 2012-05-15T06:37:47.543 回答