Question

我想实现一种动态方式来创建列表拖放，现在只是理论上的，我想将“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>

Answer 1

试试这个：

在sortable的receive事件中，获取要添加的listitem的id。

e.g。

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

在receive函数中，执行代码以获取listitem的id：

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

这个应该让你至少开始。

ui jquery draggable element

1 个答案: