jQuery UI и flex-wrap - элемент, перетаскивающий элемент за указателем - PullRequest
Новая
       10

jQuery UI и flex-wrap - элемент, перетаскивающий элемент за указателем

0 голосов
/ 09 октября 2018

У меня возникли проблемы с получением пользовательского интерфейса jquery для правильного перетаскивания элементов в списке, который содержит несколько строк.

Fiddle: https://jsfiddle.net/xpvt214o/874275/

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

Учитывая очень простой список: 

<div class="wrapper">
  <ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
  </ul>
</div>

Если я укажу заданную ширину, то используйте гибкую обертку, чтобы обернуть элементы вв следующих строках .sortable(), кажется, начинает отставать от указателя при попытке перетаскивания элементов.

CSS-код будет выглядеть так: 

ul {
  list-style: none;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

li {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

Тогда, наконец, JavaScript:

$('ul').sortable({
    'placeholder': {
    'element': function ()
    {
        return $('<li class="placeholder">placeholder</li>')[0];
    },
    'update': function ()
    {
        return true;
    }
  }
});

Это простой пример, который вы можете увидеть в действии внутри скрипки.

Кто-нибудь сталкивался с этой проблемой раньше и нашел решение?

...