通过触摸实现 Drag n' Drop 的 sortableJS 移动实现答案

【问题标题】：sortableJS mobile implementation of Drag n' Drop via touch通过触摸实现 Drag n' Drop 的 sortableJS 移动实现
【发布时间】：2020-07-26 16:11:04
【问题描述】：

sortableJS 的新用户。在具有拖放功能的Trello 克隆的移动端工作。

Drag n' Drop 在桌面上运行顺畅，但我似乎找不到需要为移动设备添加哪些调整。

sortableJS 有一些您可以添加的移动选项，例如（delay、delayOnTouchOnly、touchStartThreshold 等）只是找不到我想要的关于能够：

水平滚动到滚动条的末端，
垂直滚动列表中的列表项，
在列表之间拖放，
在包含列表的内部和外部拖放列表项。

这是我的live app

 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();
        });
      },
    });
  });
}

任何帮助将不胜感激！

【问题讨论】：

标签： javascript mobile drag-and-drop touch sortablejs

【解决方案1】：

只是归结为拥有正确的 CDN！我导入的那个还没有解决这个功能。如有疑问，请检查您的脚本！ :)