jQuery UI Draggable: прокрутка других списков при перетаскивании по ним - PullRequest
Новая
       19

jQuery UI Draggable: прокрутка других списков при перетаскивании по ним

1 голос
/ 17 июня 2019

У меня странная проблема с jQuery ui-sortable.В моем примере у меня есть несколько столбцов, и в каждом столбце у меня есть несколько сортируемых элементов.

Я хочу перетащить в любой столбец, сортировка внутри одного столбца не проблема.

У меня две проблемы:

  • При перетаскивании из одного столбца в другой столбец требуется, чтобы столбец назначения автоматически прокручивался до нижней части.
  • Горизонтальная прокрутка не выполняет автоматическую прокрутку для столбца с правой стороны.

Смотрите мой пример https://jsfiddle.net/maidanhcongtu/9ws2unLa/11/

var configuration2 = {
        cursor : 'move',
        placeholder : 'highlight',
        dropOnEmpty : true,
        connectWith : ".connectedSortable",
        containment : "body",
    };



    $(".connectedSortable").sortable(configuration2).disableSelection();

1 Ответ

0 голосов
/ 26 июня 2019

Хорошо, я нашел решение отключить прокрутку, когда вы больше не сортируете в исходном родительском элементе, чтобы сортируемый элемент не прокручивал родительский элемент при перетаскивании по другому сортируемому элементу.

Я также сделалсортируемый список, который вы сортируете по автопрокрутке вниз.

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

Кроме того,Я добавил идентификаторы в каждый сортируемый список.

см. Обновленную скрипту: https://jsfiddle.net/Souleste/ktxeu35p/46/

$('li').addClass('item');
var y;
var og;
var n, nB, half;
$(".connectedSortable").sortable({
  cursor : 'move',
  placeholder : 'highlight',
  dropOnEmpty : true,
  connectWith : ".connectedSortable",
  containment : "body",
  items: '.item',
  start: function(event,ui) {
    og = $(this).closest('.connectedSortable');
  },
  over: function(event,ui) {
    n = $(this).closest('.connectedSortable');
    nB = n.outerHeight(true) + n.position().top;
    half = nB / 2;
  },
  sort: function(event,ui) {
  console.log(half);
    if ( n.attr('id') != og.attr('id') ) {
        og.sortable( "option", "scroll", false );
      if (event.pageY > half) {
        n.scrollTop(n.scrollTop() + 5);
      } else if (event.pageY < half) {
        n.scrollTop(n.scrollTop() - 5);
      }
    } else {
        og.sortable( "option", "scroll", true );
    }
  }
});
...