jquery ui sortable - problem with triggering target

Question

I am using jquery-3.4.1.min.js and jquery-ui-1.12.1 . I have a problem with jquery ui sortable widget. When I try to drag "div.container", which is child of "div.containerList" (with applied sortable), I am not able to trigger dom change on whole height of sibling element, I have to adjust dragged element vertical position. Can somebody please explain this behavior, possibly with solution? Thank you very much!

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

A added some modificaton to make it more "contrast" for each element.

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;
    }

Chada Chada · Accepted Answer · 2020-03-23T02:41:31

after reading through API documentation, I found option "tolerance", which solved my problem.

tolerance Type: String Default: "intersect" Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values: "intersect": The item overlaps the other item by at least 50%. "pointer": The mouse pointer overlaps the other item. Code examples: Initialize the sortable with the tolerance option specified:

1 2 3 $( ".selector" ).sortable({ tolerance: "pointer" });

jquery ui sortable - problem with triggering target

1 Answers