Сортируемые элементы jQuery С плавающей точкой Сортировка не гладкая Проблема - PullRequest
Новая
       15

Сортируемые элементы jQuery С плавающей точкой Сортировка не гладкая Проблема

0 голосов
/ 10 февраля 2019

jQuery Сортируемое перетаскивание не работает гладко, когда элементы плавают вправо.Я пытаюсь исправить это без успеха, и я не понимаю, почему это проблема.

Чтобы воспроизвести и понять проблему, вам нужно попробовать перетащить элементы, и вы увидите, что иногда вам нравится размещать элемент в одном месте, а заполнитель остается в другом месте.см. прилагаемое изображение, чтобы лучше понять.

enter image description here

При удалении свойства float:right оно будет работать хорошо.

Примечание: немного сложнее понять проблему, я воспроизвожу ее на jsfiddle, но вам нужно поиграть с ней, чтобы понять ее

https://jsfiddle.net/royshoa/4Lprn9bs/72

Я будурад получить за это ответы.

1 Ответ

0 голосов
/ 15 февраля 2019

Похоже, что поплавок справа внутри #sortable портит поведение jquery-ui-sortable.

, чтобы сохранить ваш обратный порядок (3,2,1) И выровнять его вправоИ сохраните желаемую функциональность так, как вы описали:

  • извлеките float:right из #sortable и поместите его в родительский элемент .example-box: теперь контейнер родительского элемента перемещается вправо, но это не влияет на #sortable

  • для получения обратного порядка 3, 2, 1, вам нужно только изменить порядок элементов
    в пределах вашего кода jQuery, используя get (). reverse () .При этом порядок больше не влияет на jquery-ui-sortable, так как больше не используется float:right

html: 

<div class="example-box">
  <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
  </ul>
</div>

css: 

.example-box {
  margin: 50px;
  border: 1px solid navy;
  float: right;
}

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sortable li {
  margin: 3px 3px 3px 0;
  padding: 1px;
  width: 120px;
  height: 120px;
  font-size: 4em;
  text-align: center;
  float: left;
}

#sortable li {}

.draggable-placeholder {
  border: 2px dashed #D9D9D9 !important;
  background-color: #F7F7F7 !important;
}

jQuery: 

jQuery(function($) {

  $('#sortable').sortable({
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    forcePlaceholderSize: true,
    placeholder: 'draggable-placeholder',
    tolerance: 'pointer',
    axis: 'x'
  });

  var list = $('ul#sortable');
  var listItems = list.children('#sortable>li');
  list.append(listItems.get().reverse());

});

вот рабочий jsfiddle: https://jsfiddle.net/n7b9wezj/3/

Примечание: я установил axis:x, потому что он показывает функциональность лучше, но выне нужно устанавливать это.Синяя рамка предназначена только для иллюстрации положения div ...

редактирования для отражения комментариев вот еще один пример использования flexbox: https://jsfiddle.net/y9qd08bn/1/ Я установилширина до 90%, поэтому в скрипке он выглядит лучше, но вы можете использовать его со 100%.

...