0

谁能帮我一个忙，将我的可拖动项目添加到已连接的可排序列表中。我发现如果连接的可排序列表以“溢出：自动”样式溢出 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>
4

1 回答 1

0

对我来说似乎是一个错误

另一个补充：如果您在尝试将其添加到可排序之前将您的可拖动对象拖出 div，它也可以工作

一种可能的解决方法与 jQuery UI 演示部分中的购物车示例相同。这不会让您在拖动时立即对项目进行排序（因为它们将在放置时附加到可排序的对象），但它会生成一个功能强大且可扩展的可排序对象

资源：

<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>
于 2010-11-04T13:34:39.893 回答