Первый и последний сортируемые элементы не всегда перемещаются в jQuery UI Sortable. ⇐ Jquery

[Anonymous]

В веб-приложении, которое я пишу, пользователи могут добавлять свои собственные кнопки на панель управления, а затем изменять порядок этих кнопок с помощью перетаскивания. Чтобы творить чудеса, я использую виджет сортировки пользовательского интерфейса jQuery.

Кнопки расположены в один ряд слева направо. Я использую flexbox для их оформления и установил метод sortable, чтобы разрешить перемещение только вдоль оси X. По большей части все работает хорошо, НО…

• Иногда, когда я перетаскиваю кнопку до самого начала,
  строке, крайняя левая кнопка не сдвинется с места
  для нее.
• Иногда то же самое происходит, когда строка заполнена
  br />buttons, и я пытаюсь перетащить кнопку до конца строки. (Крайняя правая кнопка не сдвигается с места.)

Сначала я не мог понять, почему кнопки в крайнем левом и правильно, иногда вел себя так, как хотелось, а иногда нет. В конце концов я понял, что все зависит от того, где я схватил кнопку, которую перетаскивал. Установленный мною JSFiddle иллюстрирует проблему:

https://jsfiddle.net/DanRobinson/8nap51Lg/78/

В Fiddle, если вы захватите среднюю кнопку рядом с ее левым краем, вы сможете успешно перетащить ее в начало строки, но не в конец строки. И наоборот, если вы захватите ту же самую кнопку ближе к ее правому краю, вы сможете перетащить ее в конец строки, но не в начало.

Мне нужны кнопки вести себя последовательно независимо от того, где пользователь их схватил. Есть ли в виджете Sortable настройка, которая решит эту проблему? (Изменение параметра «допуск» на «указатель», похоже, не помогает.)

HTML:


Custom Button 1
Custom Button 2 is wider than the others
Custom Button 3



CSS:

#container {
display: flex;
flex-direction: row;
padding: 10px;
border: 1px solid black;
margin-top: 20px;
width: 600px;
}

#container > div {
flex: 0 1 auto;
padding: 2px 8px;
margin: 0 5px;
border: 1px solid #777;
border-radius: 3px;
background-color: #E1E1E1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}


Javascript:

$(document).ready(function () {

$("#container").sortable({
axis: "x",
containment: "parent",
});

});


Подробнее здесь: https://stackoverflow.com/questions/577 ... n-jquery-u