jquery UI sortable - проблема с срабатыванием цели - PullRequest
Новая
       15

jquery UI sortable - проблема с срабатыванием цели

1 голос
/ 23 марта 2020

Я использую jquery -3.4.1.min. js и jquery -ui-1.12.1. У меня проблема с сортируемым виджетом jquery. Когда я пытаюсь перетащить «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;
    }

1 Ответ

0 голосов
/ 23 марта 2020

после прочтения документации API, я нашел опцию "допуск", которая решила мою проблему.

допуск Тип: строка По умолчанию: "пересечение" Указывает, какой режим использовать для проверки, является ли элемент Перемещенный завис над другим предметом. Возможные значения: «intersect»: элемент перекрывает другой элемент как минимум на 50%. «указатель»: указатель мыши перекрывает другой элемент. Примеры кода: Инициализируйте сортируемое с указанным параметром допуска:

1 2 3 $ (".selector") .sortable ({допуск: "указатель"});

...