0

接続された並べ替え可能なリストに私のドラッグ可能なアイテムを作成するために誰が私に恩恵を与えることができますか? 接続されている並べ替え可能なリストが「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>
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 に答える