jquery ui sortable-触发目标的问题

Question

我正在使用jquery-3.4.1.min.js和jquery-ui-1.12.1。我对jQuery ui可排序小部件有问题。当我尝试拖动“ div.container”（它是“ div.containerList”的子项（已应用可排序））时，我无法触发同级元素整个高度的dom变化，因此必须调整拖动元素的垂直位置。有人可以解释这个行为，可能有解决方案吗？非常感谢你！

https://jsfiddle.net/chada090/47ku2jer/

A添加了一些修改，以使其与每个元素更加“对比”。

HTML

<div class="containerList">
    <div class="container"><span class="title">test kontejner</span>
        <div class="addTask">
            <div class="switch">Přidat úkol</div>
        </div>
        <div class="taskList"></div>
    </div>
    <div class="container">
      <span class="title">test kontejner1</span>
        <div class="addTask">
            <div class="switch">Přidat úkol</div>
        </div>
        <div class="taskList"></div>
    </div>
    <div class="container placeholder"><span class="title_newCont">Nový kontejner</span></div>
</div>

JS

$(".containerList").sortable({
//                containment: "parent",
                placeholder: "ui-state-highlight container",
                 change: function( event, ui ) {
                     console.log(ui);
                 }
            }).disableSelection();

CSS

.containerList{
    display: flex;
    min-height: 600px;
}
.containerList .container{
    display:inline;
    margin-left: 15px;
    margin-right: 15px;
    flex: 0 0 300px;
    min-height: 150px;
    width: 300px;
    display:flex;
    flex-direction: column;
    background: gray;
    padding: 20px;


}

    .container .title_newCont{
        cursor: pointer;
        color: blue;
    }
    .container .addTask{
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: white;
        box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11); 
        min-height: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px;
    }
    .container .taskList{
        margin-top: 20px;
        background: brown;
        height: 20px;
    }
    .taskList > div{
        background-color: white;
        margin-top: 15px;
    }
    .taskList .taskItem{
        margin-bottom: 10px;
        background-color: white;
        box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11); 
        min-height: 40px;
        display:flex;
        align-items: center;
        padding: 5px;
        background: blue;
    }
    .taskNewItem > *{
        padding: 3px;
        background: green;
    }
    .taskNewItem input{
        border: none;
        outline: none;
        background: red;
    }

    .addTask .switch{
        text-align: center;
        width: 100%;
        background: yellow;
    }
    .taskNewItem{
        display: flex;
        flex-direction: column;
    }
    .taskNewItem input{
        width: 100%;
    }
    .taskNewItem .taskButtonAdd{
        width: 100%;
        background-color: green;
        flex:0 0 40px;
        font-size: 15px;
        border: none;
    }
    .ui-state-highlight{
      background-color:blue !important;
    }

Answer 1

阅读完API文档后，我发现了选项“ tolerance”，它解决了我的问题。

公差类型：字符串默认：“ intersect”指定要使用的模式用于测试正在移动的物品是否悬停在另一个物品上项目。可能的值：“相交”：该项与另一项重叠至少增加了50％ “指针”：鼠标指针与其他项目重叠。代码示例：使用公差选项初始化可排序对象指定：

1 2 3 $（“ .selector”）.sortable（{公差：“指针”}）;