Javascript JQuery UI可排序连接列表示例中y滚动列存在问题

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

我的代码示例：上述示例的我的版本如下：

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>

第1列
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
第2栏
项目A
B项
项目C
项目D
项目E
项目F
项目G
项目H
项目一
项目J
项目K
项目L
项目M
项目N
项目O
项目P
项目Q
项目R
项目S
项目T
项目U
项目五
项目W
项目十
项目Y
项目Z

正如您所看到的，我的代码和jQueryUI示例之间并没有太大区别

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

任何帮助都将不胜感激

非常感谢,

---

Karthik

您可以针对可滚动实例的

scrollParent

属性，并在

over

事件中对其进行更改。这就是jQueryUI中用来计算滚动的内容。它可能应该是默认行为，但由于某种原因，它看起来不像是默认行为

见此：

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”，
占位符：“ui状态突出显示”，
结束：功能（e、ui）{
$（ui.sender）.sortable（'instance'）.scrollParent=$（e.target）
}
}).disableSelection（）；
});
.title{
浮动：左；
}
#排序1，#排序2{
边框：1px实心#eee；
宽度：147px；
最小高度：20px；
保证金：0；
填充：5px0；
浮动：左；
右边距：10px；
高度：500px；
溢出y：自动；
溢出x：隐藏；
}
#可排序1分区，#可排序2分区{
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
高度：50px！重要；
}

第1栏
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
第2栏
项目A
B项
项目C
项目D
项目E
项目F
项目G
项目H
项目一
项目J
项目K
项目L
项目M
项目N
项目O
项目P
项目Q
项目R
项目S
项目T
项目U
项目五
项目W
项目十
项目Y
项目Z
您需要将助手移动到其他列表中，如下所示：


我知道这已经5年了/但我的问题是水平滚动父容器？我试着计算元素的左/右位置，但它太脏了。。。有没有真正的/尝试过的解决方案？
$('.connectedSortable').sortable({
    connectWith: '.connectedSortable',
    placeholder: 'ui-state-highlight',
    helper: function (event, element) {
        return element.clone().appendTo($('.connectedSortable').not(element.parent()));
    }
});