jQuery перетаскиваемый - я не могу перетащить свой элемент - PullRequest
Новая
       42

jQuery перетаскиваемый - я не могу перетащить свой элемент

0 голосов
/ 04 ноября 2010

Кто может сделать мне одолжение, чтобы включить мой перетаскиваемый элемент в связанный сортируемый список.Я обнаружил, что если подключенный сортируемый список переполняет div в стиле «overflow: auto», перетаскиваемый элемент нельзя перетаскивать в него.Это ошибка?Кто-нибудь, помогите мне, пожалуйста.Спасибо заранее!: -) 

<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>

1 Ответ

0 голосов
/ 04 ноября 2010

мне кажется ошибкой

еще одно дополнение: если вы перетаскиваете свой перетаскиваемый элемент из 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>
...