Swiper+Draggabilly causes unable to slide to the right - Codes Helper

the desired effect is that the element can be dragged out of the swiper, or two swap positions
, but it is found that when the translation slides, that is, the element 0 moves between the elements of swiper-slide 2, anyway, and so on, as long as the element slides to the right, beyond the range of the element, you will no longer be able to slide that element after sliding.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
  <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    -sharpapp {
      height: 100%;
      overflow: hidden;
    }

    .disabled {
      pointer-events: none;
    }

    .draggable-container {
      width: 100%;
      height: 500px;
    }

    .draggable-container {
      position: absolute;
      z-index: 10;
    }

    .draggable {
      width: 50px;
      height: 50px;
      background: red;
    }

    .swiper-wrapper,
    .swiper-container {
      /* overflow: inherit!important; */
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="draggable-container">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in optionList" :key="index">
            <div class="item">
              <div class="draggable" :index="index" :holeIndex="index" :id="item.id">
                {{index}}
                <i v-show="false" class="del-icon"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: "-sharpapp",
    data: function () {
      const vm = this;
      return {
        swiperOption: {
          slidesPerView: 4,
          slidesPerGroup: 4,
          allowTouchMove: false,
          autoHeight: true,
          loop: false,
          pagination: {
            clickable: true
          },
          on: {
            init() {
              var draggableElems = document.querySelectorAll(".draggable");
              for (var i = 0, len = draggableElems.length; i < len; iPP) {
                var draggableElem = draggableElems[i];
                var draggie = new Draggabilly(draggableElem, {
                  containment: ".draggable-container"
                });
                $(draggie.element).on("click", function () {
                  alert(222);
                });
                draggie.on("click", function () {
                  alert(222);
                });
                draggie.on("dragStart", function (event, pointer, moveVector) {
                  console.log("st");
                  var $el = $(this.element);
                  $el.addClass("disabled");
                });

                draggie.on("dragEnd", function (event, pointer, moveVector) {
                  console.log("ed");
                  var $el = $(this.element);
                  $el.removeClass("disabled");
                });
              }
            },
            slideChange: function () {
              console.log(this.realIndex);
              // alert(222)
            }
          }
        },
        optionList: [
          {
            optionName: "111"
          },
          {
            optionName: "222"
          },
          {
            optionName: "333"
          },
          {
            optionName: "444"
          },
          {
            optionName: "555"
          },
          {
            optionName: "666"
          },
          {
            optionName: "777"
          },
          {
            optionName: "888"
          },
          {
            optionName: "999"
          },
          {
            optionName: "000"
          }
        ]
      };
    },
    mounted: function () {
      var mySwiper = new Swiper(".swiper-container", this.swiperOption)
    }
  })
</script>

</html>

above is the code, copy out can see the effect directly, trouble you big chest brother to take a look at what is the reason? Is there any good solution