使用 JQuery UI 可排序连接列表示例的 y-scrollable 列存在问题

Question

我正在尝试做的事情：我正在尝试创建一个拖放排序网格。遵循与 JQuery UI 可排序连接列表相同的示例。

http://jqueryui.com/sortable/#connect-lists

我的代码示例：我上面示例的版本如下JSFiddle，

https://jsfiddle.net/t60x6j2b/5/

JS 代码

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable",
        placeholder: "ui-state-highlight"
    }).disableSelection();
});

CSS

#sortable1, #sortable2 {
            border: 1px solid #eee;
            width: 147px;
            min-height: 20px;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
            height:500px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        #sortable1 div, #sortable2 div {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
            height: 50px !important;
        }

HTML

<div class="title">Column 1</div>
<div id="sortable1" class="connectedSortable">
    <div class="ui-state-default">Item 1</div>
    <div class="ui-state-default">Item 2</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
    <div class="ui-state-default">Item 5</div>
    <div class="ui-state-default">Item 6</div>
    <div class="ui-state-default">Item 7</div>
    <div class="ui-state-default">Item 8</div>
    <div class="ui-state-default">Item 9</div>
    <div class="ui-state-default">Item 10</div>
</div>
<div class="title">Column 2</div>
<div id="sortable2" class="connectedSortable">
    <div class="ui-state-highlight">Item A</div>
    <div class="ui-state-highlight">Item B</div>
    <div class="ui-state-highlight">Item C</div>
    <div class="ui-state-highlight">Item D</div>
    <div class="ui-state-highlight">Item E</div>
    <div class="ui-state-highlight">Item F</div>
    <div class="ui-state-highlight">Item G</div>
    <div class="ui-state-highlight">Item H</div>
    <div class="ui-state-highlight">Item I</div>
    <div class="ui-state-highlight">Item J</div>
    <div class="ui-state-highlight">Item K</div>
    <div class="ui-state-highlight">Item L</div>
    <div class="ui-state-highlight">Item M</div>
    <div class="ui-state-highlight">Item N</div>
    <div class="ui-state-highlight">Item O</div>
    <div class="ui-state-highlight">Item P</div>
    <div class="ui-state-highlight">Item Q</div>
    <div class="ui-state-highlight">Item R</div>
    <div class="ui-state-highlight">Item S</div>
    <div class="ui-state-highlight">Item T</div>
    <div class="ui-state-highlight">Item U</div>
    <div class="ui-state-highlight">Item V</div>
    <div class="ui-state-highlight">Item W</div>
    <div class="ui-state-highlight">Item X</div>
    <div class="ui-state-highlight">Item Y</div>
    <div class="ui-state-highlight">Item Z</div>
</div>

您可以看到我的代码和 jquery ui 示例之间没有太大区别。

我的问题：现在，我的问题是当我从第 1 列拖动项目 1 并尝试在第 2 列的项目 M 和项目 N 之间放入（显然隐藏在滚动条下） ，我需要第 2 列滚动条来激活并开始滚动。而是滚动第 1 列。

任何帮助将不胜感激。

非常感谢，

卡提克

Answer 1

您可以定位可滚动实例的scrollParent 属性并在over 事件上更改它。这是 jquery-ui 中用于计算滚动的内容。它可能应该是默认行为，但由于某种原因，它看起来不像。

看到这个example：

$(function () {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        placeholder: "ui-state-highlight",
        over: function (e, ui) {
            $(ui.sender).sortable('instance').scrollParent = $(e.target)
        }
    }).disableSelection();
});

.title {
    float:left;
}
#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 147px;
    min-height: 20px;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
    height:500px;
    overflow-y: auto;
    overflow-x: hidden;
}
#sortable1 div, #sortable2 div {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    height: 50px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<div class="title">Column 1</div>
<div id="sortable1" class="connectedSortable">
    <div class="ui-state-default">Item 1</div>
    <div class="ui-state-default">Item 2</div>
    <div class="ui-state-default">Item 3</div>
    <div class="ui-state-default">Item 4</div>
    <div class="ui-state-default">Item 5</div>
    <div class="ui-state-default">Item 6</div>
    <div class="ui-state-default">Item 7</div>
    <div class="ui-state-default">Item 8</div>
    <div class="ui-state-default">Item 9</div>
    <div class="ui-state-default">Item 10</div>
</div>
<div class="title">Column 2</div>
<div id="sortable2" class="connectedSortable">
    <div class="ui-state-highlight">Item A</div>
    <div class="ui-state-highlight">Item B</div>
    <div class="ui-state-highlight">Item C</div>
    <div class="ui-state-highlight">Item D</div>
    <div class="ui-state-highlight">Item E</div>
    <div class="ui-state-highlight">Item F</div>
    <div class="ui-state-highlight">Item G</div>
    <div class="ui-state-highlight">Item H</div>
    <div class="ui-state-highlight">Item I</div>
    <div class="ui-state-highlight">Item J</div>
    <div class="ui-state-highlight">Item K</div>
    <div class="ui-state-highlight">Item L</div>
    <div class="ui-state-highlight">Item M</div>
    <div class="ui-state-highlight">Item N</div>
    <div class="ui-state-highlight">Item O</div>
    <div class="ui-state-highlight">Item P</div>
    <div class="ui-state-highlight">Item Q</div>
    <div class="ui-state-highlight">Item R</div>
    <div class="ui-state-highlight">Item S</div>
    <div class="ui-state-highlight">Item T</div>
    <div class="ui-state-highlight">Item U</div>
    <div class="ui-state-highlight">Item V</div>
    <div class="ui-state-highlight">Item W</div>
    <div class="ui-state-highlight">Item X</div>
    <div class="ui-state-highlight">Item Y</div>
    <div class="ui-state-highlight">Item Z</div>
</div>

Answer 2

你需要像这样将一个助手移动到另一个列表中：

https://jsfiddle.net/t60x6j2b/6/

$('.connectedSortable').sortable({
    connectWith: '.connectedSortable',
    placeholder: 'ui-state-highlight',
    helper: function (event, element) {
        return element.clone().appendTo($('.connectedSortable').not(element.parent()));
    }
});