通过触摸拖动Drop的sortableJS移动实现

Question

sortableJS的新手。使用拖放功能在Trello克隆的移动端工作。

Drag n'Drop在桌面上正常运行，但是我似乎找不到要对移动设备进行哪些调整。

[sortableJS有一些可以添加的移动选项，例如[delay，delayOnTouchOnly，touchStartThreshold等）只是找不到我想要的关于以下方面的信息：

1. 水平滚动到滚动条的末端，
2. 垂直滚动通过列表中的列表项，
3. 在列表之间拖放”，>
4. 将n个列表项拖放到包含列表的内部和外部。

这里是我的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();
        });
      },
    });
  });
}
任何帮助将不胜感激！

sortableJS的新功能。具有“拖放”功能的Trello克隆的移动端工作。 Drag n'Drop在桌面上正常运行，但是我似乎找不到我需要包括的调整项...

Answer 1

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