admin管理员组

文章数量:1405539

I have a container with a list of draggable items and container with a list of sortable items. The draggables & the sortable list is connected, allowing the user to drag clones of the draggables to the sorted list.

The draggable items appear in a vertical list, however the sortable items appear in a horizontal list, achieved by floating them left. The container of the sortable items has its overflow set to auto, resulting in a horizontal scrollbar if the contents overflow. The two containers appear right next to each other, the draggables to the left & the sortables to the right.

The problem I'm experiencing is when the container of sortable items is scrolled to the right, dragging from the draggables' container immediately fires the sortables' events. It appears as if the contents of the sortables' container is moved behind the draggables' container.

Here is my code:

<html xmlns="" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Sortables in scrollable divs</title>
    <script type="text/javascript" language="JavaScript" src=".3/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript" src=".7.1/jquery-ui.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $("#sortable").sortable({
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
                    if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
                }
            });

            $("#sortable").sortable("disable");

            $("#draggable li").draggable({
                connectToSortable: '#sortable',
                helper: 'clone',
                revert: 'invalid',
                cursor: "default",
                cursorAt: { top: -5, left: -5 },
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped");
                }
            });

            $("#container2").mouseenter(function() {
                console.log("enter sortable container");
                $("#sortable").sortable("enable");
            }).mouseleave(function() {
                console.log("leaving sortable container");
                $("#sortable").sortable("disable");
            });

            $("#draggable, #sortable").disableSelection();
        });
    </script>
    <style type="text/css">
        html, body, p, td, th, li, input, select, option, textarea
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color:#343E41;
        }

        .wrapper
        {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            height: expression(this.parentNode.offsetHeight + "px");
        }

        .scroll-wrapper
        {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
            height: expression(this.parentNode.offsetHeight + "px");
        }

        #container1
        {
            float:left;
            width:200px;
            height:400px;
            overflow:auto;
            border:solid #000 1px;
            margin:5px;
        }

        #container2
        {
            float:left;
            width:600px;
            height:400px;
            overflow:auto;
            border:solid #000 1px;
            margin:5px;
        }

        ul#draggable
        {
            padding:0;
            margin:0;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
        }

        ul#draggable li
        {
            display:block;
            margin:5px;
            border:solid #000 1px;
            height:50px;
            width:150px;
        }

        ul#sortable
        {
            padding:0;
            margin:0;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
            height:380px;
            width:744px;
        }

        ul#sortable li
        {
            display:block;
            float:left;
            margin:5px;
            border:solid #000 1px;
            height:370px;
            width:50px;
            text-align:center;
        }
    </style>
</head>
<body>
    <form id="form1" action="">
        <div id="container1">
            <ul id="draggable">
                <li>1A</li>
                <li>2A</li>
                <li>3A</li>
                <li>4A</li>
                <li>5A</li>
                <li>6A</li>
                <li>7A</li>
                <li>8A</li>
                <li>9A</li>
                <li>10A</li>
                <li>11A</li>
                <li>12A</li>
            </ul>
        </div>
        <div id="container2">
            <ul id="sortable">
                <li class="ui-state-default">1</li>
                <li class="ui-state-default">2</li>
                <li class="ui-state-default">3</li>
                <li class="ui-state-default">4</li>
                <li class="ui-state-default">5</li>
                <li class="ui-state-default">6</li>
                <li class="ui-state-default">7</li>
                <li class="ui-state-default">8</li>
                <li class="ui-state-default">9</li>
                <li class="ui-state-default">10</li>
                <li class="ui-state-default">11</li>
                <li class="ui-state-default">12</li>
            </ul>
        </div>
    </form>
</body>

How can I avoid the sortable events to fire until the item is dragged over the sortable container?

Thanks in advance

I have a container with a list of draggable items and container with a list of sortable items. The draggables & the sortable list is connected, allowing the user to drag clones of the draggables to the sorted list.

The draggable items appear in a vertical list, however the sortable items appear in a horizontal list, achieved by floating them left. The container of the sortable items has its overflow set to auto, resulting in a horizontal scrollbar if the contents overflow. The two containers appear right next to each other, the draggables to the left & the sortables to the right.

The problem I'm experiencing is when the container of sortable items is scrolled to the right, dragging from the draggables' container immediately fires the sortables' events. It appears as if the contents of the sortables' container is moved behind the draggables' container.

Here is my code:

<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Sortables in scrollable divs</title>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis./ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis./ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $("#sortable").sortable({
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
                    if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
                }
            });

            $("#sortable").sortable("disable");

            $("#draggable li").draggable({
                connectToSortable: '#sortable',
                helper: 'clone',
                revert: 'invalid',
                cursor: "default",
                cursorAt: { top: -5, left: -5 },
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped");
                }
            });

            $("#container2").mouseenter(function() {
                console.log("enter sortable container");
                $("#sortable").sortable("enable");
            }).mouseleave(function() {
                console.log("leaving sortable container");
                $("#sortable").sortable("disable");
            });

            $("#draggable, #sortable").disableSelection();
        });
    </script>
    <style type="text/css">
        html, body, p, td, th, li, input, select, option, textarea
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color:#343E41;
        }

        .wrapper
        {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            height: expression(this.parentNode.offsetHeight + "px");
        }

        .scroll-wrapper
        {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
            height: expression(this.parentNode.offsetHeight + "px");
        }

        #container1
        {
            float:left;
            width:200px;
            height:400px;
            overflow:auto;
            border:solid #000 1px;
            margin:5px;
        }

        #container2
        {
            float:left;
            width:600px;
            height:400px;
            overflow:auto;
            border:solid #000 1px;
            margin:5px;
        }

        ul#draggable
        {
            padding:0;
            margin:0;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
        }

        ul#draggable li
        {
            display:block;
            margin:5px;
            border:solid #000 1px;
            height:50px;
            width:150px;
        }

        ul#sortable
        {
            padding:0;
            margin:0;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
            height:380px;
            width:744px;
        }

        ul#sortable li
        {
            display:block;
            float:left;
            margin:5px;
            border:solid #000 1px;
            height:370px;
            width:50px;
            text-align:center;
        }
    </style>
</head>
<body>
    <form id="form1" action="">
        <div id="container1">
            <ul id="draggable">
                <li>1A</li>
                <li>2A</li>
                <li>3A</li>
                <li>4A</li>
                <li>5A</li>
                <li>6A</li>
                <li>7A</li>
                <li>8A</li>
                <li>9A</li>
                <li>10A</li>
                <li>11A</li>
                <li>12A</li>
            </ul>
        </div>
        <div id="container2">
            <ul id="sortable">
                <li class="ui-state-default">1</li>
                <li class="ui-state-default">2</li>
                <li class="ui-state-default">3</li>
                <li class="ui-state-default">4</li>
                <li class="ui-state-default">5</li>
                <li class="ui-state-default">6</li>
                <li class="ui-state-default">7</li>
                <li class="ui-state-default">8</li>
                <li class="ui-state-default">9</li>
                <li class="ui-state-default">10</li>
                <li class="ui-state-default">11</li>
                <li class="ui-state-default">12</li>
            </ul>
        </div>
    </form>
</body>

How can I avoid the sortable events to fire until the item is dragged over the sortable container?

Thanks in advance

  • javascript
  • jquery
  • scroll
  • jquery-ui-sortable
  • draggable
Share Improve this question asked Jun 19, 2009 at 6:14 NeilCNeilC 1,3901 gold badge18 silver badges37 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

It has been a long time since I posted this question and since then, new versions of jQuery & jQuery UI has been released.

In addition, the development team of jQuery UI added an example of draggables connected with sortables, were added.

So I have updated my original sample code above and modified it so that it maches my scenario. I wanted a horizontal scrolling sortable section that will automatically expand when new items have been added.

My example below has resolved my issue and the code looks much cleaner & simpler:

$(function () {
            $("#sortable").sortable({
                revert: true,
                start: function (event, ui) {
                    $(this).width($(this).width() + ui.helper.width() + 12);
                },
                stop: function (event, ui) {
                    var w = 0;
                    $(this).children("li").each(function () {
                        w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
                    });
                    $(this).width(w);
                }
            });

            var w = 0;
            $("#sortable").children("li").each(function () {
                w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
            });
            $("#sortable").width(w);

            $("#draggable li").draggable({
                connectToSortable: "#sortable",
                helper: "clone",
                revert: "invalid"
            });
            $("ul, li").disableSelection();
        });
html, body, p, td, th, li, input, select, option, textarea
                {
                        font-family: Verdana, Arial, Helvetica, sans-serif;
                        font-size: 11px;
                        color:#343E41;
                }

                .wrapper
                {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        height: expression(this.parentNode.offsetHeight + "px");
                }

                .scroll-wrapper
                {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: auto;
                        height: expression(this.parentNode.offsetHeight + "px");
                }

                #container1
                {
                        float:left;
                        width:200px;
                        height:400px;
                        overflow:auto;
                        border:solid #000 1px;
                        margin:5px;
                }

                #container2
                {
                        float:left;
                        width:600px;
                        height:400px;
                        overflow:auto;
                        border:solid #000 1px;
                        margin:5px;
                }

                ul#draggable
                {
                        padding:0;
                        margin:0;
                        list-style-image:none;
                        list-style-position:outside;
                        list-style-type:none;
                }

                ul#draggable li
                {
                        display:block;
                        margin:5px;
                        border:solid #000 1px;
                        height:50px;
                        width:150px;
                }

                ul#sortable
                {
                        padding:0;
                        margin:0;
                        list-style-image:none;
                        list-style-position:outside;
                        list-style-type:none;
                        height:380px;
                }

                ul#sortable li
                {
                        display:block;
                        float:left;
                        margin:5px;
                        border:solid #000 1px;
                        height:370px;
                        width:50px;
                        text-align:center;
                }
           <script type="text/javascript" language="JavaScript" src="http://code.jquery./jquery-1.4.4.min.js"></script>
        <script type="text/javascript" language="JavaScript" src="https://ajax.googleapis./ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
 
    <form id="form1" action="">
    <div id="container1">
    <ul id="draggable">
    <li>1A</li>
    <li>2A</li>
    <li>3A</li>
    <li>4A</li>
    <li>5A</li>
    <li>6A</li>
    <li>7A</li>
    <li>8A</li>
    <li>9A</li>
    <li>10A</li>
    <li>11A</li>
    <li>12A</li>
    </ul>
    </div>
    <div id="container2">
    <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
    </ul>
    </div>
    </form>

Thought someone, somewhere might like to do the same and needs some help :D

本文标签： javascriptDraggableSortable amp Scrollable DivsStack Overflow

版权声明：本文标题：javascript - Draggable+Sortable &amp; Scrollable Divs - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744248690a2597144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。