Как использовать jQuery UI Sortable для правильного пересечения?

Вы можете увидеть ошибку # 8342

Сортируемый: Неверное поведение (или неправильная документация) сортируемой опции tolerance: 'intersect'

< / blockquote>

Я тестировал обходные пути (из этот ответ (я исправил его для вертикального использования) и из этот ответ [ 1136]), которые были связаны в комментарии Munim Munna, и оба обходных пути не работают правильно (очень очень глючно).

Обходной путь с tolerance: 'pointer'

Вы должны установить tolerance: 'pointer' вместе с cursorAt: {top: height/2, left: width/2} (половинный размер от ширины и высоты вашего перетаскиваемого элемента).

Опция tolerance : 'pointer' позволяет элементу заменять целевой элемент немедленно, как только курсор входит в целевой элемент. По умолчанию было установлено значение tolerance : 'intersect', что означает, что элемент перекрывает другой элемент как минимум на 50%. Но, к сожалению, есть ошибка для этой опции (см. Верх моего ответа).

Попробуйте также использовать его с опцией cursorAt и без нее или изменить значение. Этот параметр перемещает сортировочный элемент или вспомогательный элемент, поэтому курсор всегда отображается для перетаскивания из одной и той же позиции. Координаты могут быть заданы в виде хэша с использованием комбинации одного или двух ключей: {top, left, right, bottom}.

Здесь приведена документация для опции tolerance и для опции cursorAt .

Обновление от 29.01.2019

Я исправил некоторые ошибки из jQuery UI Sortable: при перетаскивании из последнего элемента, если после него недостаточно места для перемещения. Я исправил эту ошибку, добавив следующий код:

<div style="clear: both; line-height: 500px">&nbsp;</div>

непосредственно после сортируемого элемента.

var startIndex, changeIndex, uiHeight,
    bRect = $("ul li")[0].getBoundingClientRect(),
    width = bRect.right - bRect.left,
    height = bRect.bottom - bRect.top;

$('ul').sortable(
{
    tolerance: 'pointer',
    cursorAt: {top: height/2, left: width/2}, //try to use it with and without this option
    'placeholder': 'marker',
    start: function(e, ui)
    {
        startIndex = ui.placeholder.index();
        uiHeight = ui.item.outerHeight(true); //get offset incl margin

        ui.item.nextAll('li:not(.marker)').css({
            transform: 'translateY(' + uiHeight + 'px)'
        });
        ui.placeholder.css({height:0, padding:0});
    },

    change: function(e, ui)
    {
        changeIndex = ui.placeholder.index();

        if(startIndex > changeIndex)
        {
            var slice = $('ul li').slice(changeIndex, $('ul li').length);

            slice.not('.ui-sortable-helper').each(function()
            {
                var item = $(this);
                item.css({
                    background:'lightcoral',
                    transform: 'translateY(' +uiHeight+ 'px)'
                });
            });
        }
        else if(startIndex < changeIndex)
        {
            var slice = $('ul li').slice(startIndex, changeIndex);
            slice.not('.ui-sortable-helper').each(function()
            {
                var item = $(this);
                item.css({
                    background: 'lightgreen',
                    transform: 'translateY(0px)'
                });
            });
        }

        startIndex = changeIndex
    },

    stop: function(e, ui)
    {
        $('.ui-sortable-handle').css({
            background: 'lightblue',
            transform: 'translateY(0)'
        })
    }
});

body{color:white; font-family:Helveticasans-serif; padding:10px}
ul{float:left; width:300px; border-radius:6px}
ul:after{clear:both; content:''; display:table}
li
{
    background: lightblue;
    display: block;
    position: relative;
    padding: 80px 6px;
    z-index: 1;
    margin: 5px 20px;
    overflow: hidden;
    transition: transform .2s
}
.marker{opacity:0.0; transition:.2s height}
.ui-sortable-helper{transform:scale(.9)}

<br><br>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<!--
Fixing some bugs from jQuery UI Sortable:
on dragging from last item if after it
it has not enough space for moving
-->
<div style="clear: both; line-height: 500px">&nbsp;</div>
<!--END of Fixing bugs-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Полезнее увидеть этот фрагмент кода на полной странице (воспользуйтесь ссылкой вверху прямо из фрагмента).