Jquery 为什么在将列表元素标记的克隆添加到<；ul>；标签_Jquery_Html_Jquery Ui_Jquery Ui Draggable

Jquery 为什么在将列表元素标记的克隆添加到<；ul>；标签

jquery html jquery-ui

Jquery 为什么在将列表元素标记的克隆添加到<；ul>；标签,jquery,html,jquery-ui,jquery-ui-draggable,Jquery,Html,Jquery Ui,Jquery Ui Draggable,为什么jquery可拖动克隆不“克隆”添加到列表中的元素的id。列表标签9-12将自己克隆到ul标签id=sortable（列表标签1-8）中，这是正确的，当前如果我只需将列表标签元素9-12添加到列表标签元素1-8中，则单击按钮后，其id不会显示在我创建的id数组中，因此它只打印出id“1,2,3,4,5,6,7,8,9,10,11,12”。尽管我可以看到克隆是制作的，但是列表元素显示了，但是它的id丢失了，我是否丢失了什么我的html代码： <!DOCTYPE html> &l

为什么jquery可拖动克隆不“克隆”添加到列表中的元素的id。列表标签9-12将自己克隆到ul标签id=sortable（列表标签1-8）中，这是正确的，当前如果我只需将列表标签元素9-12添加到列表标签元素1-8中，则单击按钮后，其id不会显示在我创建的id数组中，因此它只打印出id“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>


jQuery UI可拖动+可排序
.demo ul{列表样式类型：无；边距：0；填充：0；边距底部：10px；}
.demo li{边距：5px；填充：5px；宽度：150px；}
$（函数（）{
$（“#可排序”）。可排序({
回复：对，
});
$（“#containedSortable”）.sortable({
回复：对，
遏制：“家长”
});
美元（“#可拖动li”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”，
});
$（“ul，li”）.disableSelection（）；
});
函数listOrder（）
{
var arr=$（“ul li”）.map（函数（）{return$（this.attr（'id'）}）.get（）；
警报（arr）；
}

第1项

所载清单：

包含3
包含4
包含5个


第6项
第7项
第8项

保存列表顺序

第9项
第10项
第11项
第12项

尝试使用刷新位置

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

        });