2

リストのドラッグ アンド ドロップを動的に作成する方法を実装したいのですが、今は単なる理論的なものです。「ul」タグ (list2) を空の「ul」タグ (mysortable) にドラッグしてから、これらの 2 つの「ul」タグ内に「list」タグ (list3) を配置し、ネストされた「ul」タグの子または兄弟として、ネストされた「ul」タグの内側に「list」タグを貼り付けたいと考えています。これまでのところ、コード「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

これを試して：

並べ替え可能な受信イベントで、追加するリストアイテムのIDを取得します。

例えば

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

receive関数で、リストアイテムのIDを取得するコードを実行してから次のようにします。

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

これで、少なくとも始めることができます。

于 2012-06-28T17:12:46.740 に答える