Question

谁能帮我把我的可拖动项目变成连接的可排序列表。我发现如果连接的可排序列表溢出了具有“overflow：auto”样式的div，则无法拖动可拖动项目。这是一个错误吗？请有人帮帮我。先谢谢！： - ）

<html>
<head>
<title>My MultiSelect</title>
<script type="text/javascript" src="http://quasipartikel.at/multiselect/js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="http://quasipartikel.at/multiselect/js/jquery-ui-1.8.custom.min.js">
</script>
<style>
ul{ border: solid 2px yellow; } 
</style>
</head>
<body>
<div style="height: 100px; overflow:auto;">
please scroll to bottom to test bug<br/><br/><br/><br/>
<ul><li id="drag">draggable item</li></ul>
<ul id="sort">
 <li>a</li>
 <li>b</li>
</ul>
</div>
<script type="text/javascript">
$("#sort").sortable();
$("#drag").draggable({
connectToSortable: "#sort",
revert: 'invalid'
});
</script>
</body>
</html>

Answer 1

对我来说似乎是个错误

另外一个补充：如果你将可拖动的拖出div之后再尝试将它添加到sortable中它也能正常工作

可能的解决方法与jQuery UI演示部分中的shopping cart example相同。这不会让您在拖动时立即对项目进行排序（因为它们将附加到可放置的可排序上）但它将生成功能性和可扩展的可排序

源：

<html>
    <head>
        <title>My MultiSelect</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#drag>li").draggable({
                revert: 'invalid',
                helper: 'clone'
            });
            $('#sort').droppable({
                accept: ":not(.ui-sortable-helper)",
                drop: function( event, ui ) {
                    $( this ).find( ".placeholder" ).remove();
                    $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    $( this ).removeClass( "ui-state-default" );
                }
            }); 
        });
        </script>
        <style type="text/css">
            ul{ 
                border: solid 2px grey; 
                width:200px;
            } 
            #main{
                border:solid 1px #cdcdcd;
                width:400px;
                height: 100px;
                overflow:auto;
            }
        </style>
    </head>
    <body>
    <div id="main">
        please scroll to bottom to test bug<br/><br/><br/><br/>
        <ul id="drag">
            <li>draggable item</li>
        </ul>
        <ul id="sort">
            <li>a</li>
            <li>b</li>
        </ul>
    </div>
    </body>
</html>

jQuery draggable - 我无法拖动我的项目

1 个答案: