sortableJS мобильная реализация Drag n 'Drop с помощью касания

Впервые в sortableJS. Работа над мобильной стороной клона Trello с функцией Drag n 'Drop.

Drag n 'Drop работает плавно на рабочем столе, но я не могу найти, какие настройки мне нужно добавить для мобильного устройства.

sortableJS имеет некоторые мобильные параметры, которые вы можете добавить, например (delay, delayOnTouchOnly, touchStartThreshold и т. д.), просто можете ' Я не нашел то, что ищу в отношении возможности:

  1. прокрутите горизонтально до конца полосы прокрутки,
  2. прокрутите вертикально по элементам списков в списках,
  3. Перетащите n 'Drop между списком,
  4. Перетащите n 'Drop элементов списка внутри и за пределы содержащего списка.

функциональность

Вот мое живое приложение

 function makeSortable() {
  Sortable.create($boardContainer[0], {
    filter: ".add",
    animation: 150,
    ghostClass: "ghost",
    easing: "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
    onMove: function (event) {
      let shouldMove = !$(event.related).hasClass("add");
      return shouldMove;
    },
    onEnd: function (event) {
      let { id, position } = $(event.item).data();
      let newPosition = event.newIndex + 1;

      if (position === newPosition) {
        return;
      }

      $.ajax({
        url: `/api/lists/${id}`,
        data: {
          position: newPosition,
        },
        method: "PUT",
      }).then(function () {
        init();
      });
    },
  });

  $(".list > ul").each(function (index, element) {
    Sortable.create(element, {
      animation: 150,
      ghostClass: "ghost",
      easing: "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
      group: "shared",
      onEnd: function (event) {
        let { id, position, list_id } = $(event.item).find("button").data();
        let newPosition = event.newIndex + 1;
        let newListId = $(event.item).parents(".list").data("id");

        if (position === newPosition && list_id === newListId) {
          return;
        }

        $.ajax({
          url: `/api/cards/${id}`,
          method: "PUT",
          data: {
            list_id: newListId,
            position: newPosition,
          },
        }).then(function () {
          init();
        });
      },
    });
  });
}

Любая помощь будет принята с благодарностью!


person James Guest    schedule 14.04.2020    source источник


Ответы (1)


Просто осталось иметь правильный CDN! Тот, который я импортировал, еще не отрегулировал функциональность. Если сомневаетесь, проверьте свои скрипты! :)

Последний CDN:

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
person James Guest    schedule 15.04.2020