2

我想实现一个动态的方式来创建一个列表拖放，现在只是理论上的，我想拖一个“ul”标签（list2）到一个空的“ul”标签（mysortable），然后我想拖一个这两个“ul”标签内的“list”标签（list3），我希望“list”标签作为嵌套“ul”标签的子级或兄弟级坚持使用内部嵌套的“ul”标签。到目前为止，如果我更改代码“connectToSortable:”div.demo ul.mysortable”，我已经成功地让“list”标签成为内部嵌套“ul”标签的兄弟，但我无法弄清楚这个问题小时候，“list”标签没有粘在嵌套的“ul”标签上，请帮忙，提前谢谢。

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 type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.droppable.js"></script>
    <script type="text/javascript" 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; margin: 5px; padding: 5px; width: 150px;}
    .demo li { margin: 5px; padding: 5px; width: 150px; }

    .mydemo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin: 5px; padding: 5px; width: 150px;}
    .mydemo li { margin: 5px; padding: 5px; width: 150px; }

    .background {color:red;}
    </style>
    <script type="text/javascript">
    $(function() {
        $(".sortable").sortable({
        connectWith: ".sortable",   
        });

        $(".mysortable").sortable({
        connectWith: ".mysortable", 
        receive: function (event, ui) {
        var arrList = $(".mysortable li").map(function() { return $(this).attr('type') }).get();
        var arrul = $(".mysortable ul").map(function() { return $(this).attr('type') }).get();
        var checkInsideMysortable = arrList[0];
        var checkInsideMysortable1 = arrList[1];
        var checkInsideMysortableul = arrul[0];
        if (checkInsideMysortableul == 'ulist')
        {
        }
        else if (checkInsideMysortable == 'link')
        {
        if (checkInsideMysortable1 == 'link')
        {
            alert("can't add another element if first element is a link");
            location.reload();
        }
        }
        else
        {
        }   
    }
    });

    $("#list2 ul").draggable({
    connectToSortable: ".mysortable",
    helper: "clone",
    });


    var selector = '.mysortable, .nestedClone';
    $("#list3 li").draggable({
    connectToSortable: "div.demo ul.mysortable ul.nestedClone",
    helper: "clone",
    });


    $( "ul, li" ).disableSelection();
    });

    function listOrder()
    {
    var arr = $(".mysortable li").map(function() { return $(this).attr('type') }).get();
    alert (arr);
    }
    </script>
</head>
<body>
<div id="myTest" class="demo">
    drag links here:
    <ul class="mysortable" style="background-color:yellow;"> </ul>
</div>
<button type="button" onclick="listOrder()">save list order</button>
<div class="mydemo">
<ul id="list2">

<ul id="11" type="ulist" class="nestedClone ui-state-default"><span>ul1</span></ul> 
<ul id="12" type="ulist" class="nestedClone ui-state-default"><span>ul2</span></ul> 
</ul>
</div>

<div class="mydemo">
<ul id="list3">
<li type="link" id="13"  class="ui-state-default">link</li> 
<li id="14" type="link" class="ui-state-default">link</li> 
</ul>
</div>

</body>
</html>
4

1 回答 1

0

尝试这个：

在 sortable 的接收事件中，获取要添加的列表项的 id。

例如

$('.selector').sortable({
  receive: function(event, ui) { ... }
});

在接收函数中，执行代码以获取列表项的 ID，然后：

$('#listitem').appendTo($('#nestedul'));

这应该让你至少开始。

于 2012-06-28T17:12:46.740 回答