当前位置：文江博客话题详情

jQuery Draggable - 拖动项目

发布于 2024-09-30 17:33:59 字数 1000 浏览 5 评论 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>

原文

I want to make my draggable item to the connected sortable list. I found if the connected sortable list is overflow the div with overflow:auto style, the draggable item cannot be dragged in to it. Is it a bug?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷鸟归林 2024-10-07 17:33:59

对我来说这似乎是一个错误

另一个补充：如果您在尝试将可拖动的内容添加到可排序之前将其拖出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>

seems like a bug to me

another addition: if you drag your draggable out of the div before you try to add it to the sortable it works too

a possible workaround would be the same as the shopping cart example at the jQuery UI demo-section. this will not let you sort the items right away on drag (as they will be appended to the sortable on drop) but it will generate a functional and extendable sortable

source:

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

回复收藏 0 原文

~没有更多了~

关于作者

阳光①夏

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

jQuery Draggable - 拖动项目

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

jQuery Draggable - 拖动项目

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。