ui jQuery可拖动元素

Question

I want to implement a dynamic way to create a list drag and drop, right now is just theoretical, I want to drag a "ul" tag (list2) to an empty "ul" tag (mysortable), then I want to drag a "list" tag (list3) inside these 2 "ul" tags and I would like the "list" tag to stick with the inside nested "ul" tag as a child or a sibling of the nested "ul" tag. 我想实现一种动态方式来创建列表拖放操作，现在仅是理论上的操作，我想将“ ul”标签（list2）拖到一个空的“ ul”标签（mysortable），然后再拖一个这两个“ ul”标签中的“ list”标签（list3），我希望“ list”标签在里面嵌套嵌套的“ ul”标签作为子标签或嵌套的“ ul”标签的兄弟姐妹。 So far I have been successful at getting the "list" tag to be the sibling of the inside nested "ul" tag if I change the code "connectToSortable: "div.demo ul.mysortable", but I can not figure out the issue that the "list" tag is not sticking to the inside nested "ul" tag as a child, please help, thanks in advance. 到目前为止，如果我更改代码“ connectToSortable：“ div.demo ul.mysortable”，则我已经成功地使“ list”标记成为内部嵌套的“ ul”标记的同级，但是我无法弄清楚问题所在请注意，“列表”标签在儿童时期没有粘贴到嵌套的“ ul”标签内，请提供帮助。

html code code: 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

Try this: 尝试这个：

On the receive event of the sortable, get the id of the listitem that you want to add. 在sortable的receive事件上，获取要添加的列表项的ID。

eg 例如

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

in the receive function, do the code to get the id of the listitem then: 在接收函数中，执行代码以获取列表项的ID，然后：

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

This should get you at least started. 这至少应该使您入门。

ui jQuery可拖动元素

问题描述

1 个解决方案

解决方案1
0 2012-06-28 17:12:46

ui jQuery可拖动元素

问题描述

1 个解决方案

解决方案1 0 2012-06-28 17:12:46

解决方案1
0 2012-06-28 17:12:46