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

Question

New to sortableJS . Working on the mobile side of a Trello clone with Drag n' Drop functionality.

Drag n' Drop is working smoothly on desktop but I can't seem to find what tweaks I need to include for mobile device.

sortableJS has some mobile options that you can add like ( delay , delayOnTouchOnly , touchStartThreshold , etc) just can't find what I'm looking for in regards to being able to:

1. scroll horizontal thru the end of the scroll bar,
2. scroll vertically thru the list-items within the lists,
3. Drag n' Drop between the list,
4. Drag n' Drop of list-items inside & outside of the containing list.

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

Any help would be greatly appreciated!

Answer 1

Just came down to having the right CDN. The one I had imported didn't yet have the functionality ironed out: When in doubt check your scripts! :)

Latest CDN:

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