Javascript 拖动UL元素的直观方法_Javascript_Jquery_Jquery Ui

Javascript 拖动UL元素的直观方法

javascript jquery jquery-ui

Javascript 拖动UL元素的直观方法,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我希望得到反馈，这将是一个很好的方法来实现一个直观的方式来拖动我的UL元素。我制作了一个小JSFIDLE，它显示了我当前的实现 $.each($('#area ul'), function(){ $(this).mouseenter( function(){ var ul_element = $(this); ul_element.prepend("<li id='movebar'>Move List</l

我希望得到反馈，这将是一个很好的方法来实现一个直观的方式来拖动我的UL元素。我制作了一个小JSFIDLE，它显示了我当前的实现

$.each($('#area ul'), function(){
    $(this).mouseenter(
        function(){
            var ul_element = $(this);
            ul_element.prepend("<li id='movebar'>Move List</li>");
            $('#movebar').mouseenter(
                function(){
                    $(ul_element).draggable({
                        snap: true,
                        containment:"parent",
                        stop: function(event,ui){

                        }
                    });
                }).mouseleave(
                function(){
                    $(ul_element).draggable("destroy");
                });
                ul_element.sortable({
                    revert:true,
                    containment:"parent",
                    cancel:"#movebar",
                    stop: function(event,ui){

                    }
                 });
            });
    $(this).mouseleave(
        function(){
            $('#movebar').remove();
            $(this).sortable("destroy");
            console.log(false);
        });
});

$。每个（$（'#区域ul'），函数（）{
$（这个）。鼠标指针(
函数（）{
var ul_元素=$（此）；
ul_元素。前置（“移动列表””；
$（“#movebar”）.mouseenter(
函数（）{
$（ul_元素）。可拖动({
是的，
遏制：“家长”，
停止：功能（事件、用户界面）{
}
});
})穆瑟利夫先生(
函数（）{
$（ul_元素）。可拖动（“销毁”）；
});
ul_元素可排序({
回复：对，
遏制：“家长”，
取消：“移动条”，
停止：功能（事件、用户界面）{
}
});
});
$（这个）鼠标(
函数（）{
$（'#movebar'）。删除（）；
$（此）。可排序（“销毁”）；
console.log（false）；
});
});

我也在寻找一个更好的解决方案，在选择UL元素。目前，我的查询选择特定div中的所有UL元素。是否有更好的方法选择单个UL元素

我对我的项目也有一个限制，我可能无法为UL元素提供唯一的ID

感谢您的帮助。


jQuery UI可排序-默认功能
#可恶的{
列表样式类型：无；
保证金：0；
填充：0；
宽度：60%；
}
#可悲的李{
保证金：0 3px 3px 3px；
填充：0.4em；
左侧填充：1.5em；
字号：1.4em；
高度：18px；
}
#可排序李跨度{
位置：绝对位置；
左边距：-1.3em；
}
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});

第1项
第2项
第3项
第4项
第5项
第6项
第7项

试试这个，它是一个简单的拖拽列表的方法，然后你可以使用css代码进行样式设置。

$。每个（$（“#area ul”）…

都很奇怪…是的，这是一个小例子。这是一个主项目，它们可以有多个ul元素。我对JS和JQUERY也比较陌生。大多数人都会将其写成（$（“#area ul”）。每个（…）很抱歉，我描述得不够详细。我希望将列表作为一个整体拖动。这就是为什么我问是否有更有效的方法来移动列表。当前的实现使我在列表中创建了一个LI元素，该元素尚未使用sort-able进行实例化。此元素是一个锚，允许您将列表拖入ide是它的父级。请查看我的JSFIDLE以获得更好的想法。

<head>
    <meta charset="utf-8">
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }
        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 1.5em;
            font-size: 1.4em;
            height: 18px;
        }
        #sortable li span {
            position: absolute;
            margin-left: -1.3em;
        }
    </style>
    <script>
        $(function() {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
        });
    </script>
</head>

<body>
    <ul id="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>
</body>