3

我有一个带有可拖动项目列表的容器和一个带有可排序项目列表的容器。可拖动对象和可排序列表是连接的，允许用户将可拖动对象的克隆拖动到已排序列表中。

可拖动项目出现在垂直列表中，但可排序项目出现在水平列表中，通过将它们向左浮动来实现。可排序项目的容器将其溢出设置为自动，如果内容溢出，则会产生水平滚动条。两个容器紧挨着出现，左侧是可拖动的，右侧是可排序的。

我遇到的问题是，当可排序项的容器向右滚动时，从可拖动项的容器中拖动会立即触发可排序项的事件。看起来好像 sortables 容器的内容被移动到 draggables 容器后面。

这是我的代码：

<html xmlns="http://www.w3.org/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.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/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>

在将项目拖到可排序容器上之前，如何避免触发可排序事件？

提前致谢

4

1 回答 1

9

自从我发布这个问题以来已经有很长时间了，从那时起，jQuery 和 jQuery UI 的新版本已经发布。

此外，jQuery UI 的开发团队添加了一个与 sortables 连接的可拖动示例，被添加。

因此，我更新了上面的原始示例代码并对其进行了修改，以使其适合我的场景。我想要一个水平滚动的可排序部分，它会在添加新项目时自动展开。

下面的示例解决了我的问题，代码看起来更简洁：

$(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.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/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>

认为某人，某处可能喜欢做同样的事情并需要一些帮助：D

于 2010-11-24T09:56:18.063 回答