vuedraggable的使用

1.須要先引入vuedraggable

import draggable from "vuedraggable";
components:{
    draggable
}複製代碼

2.代碼中使用

<draggable
        class="list-group"
        tag="ul"
        v-model="historyData"
        v-bind="dragOptions"
        handle=".handle"
        @start="drag=true"
        :move="move"
        @end="dragend"
      >
        <transition-group type="transition" name="flip-list">
          <div
            @click="goDetail(item,index)"
            v-for="(  item,index  ) in historyData"
            class="div2"
            :key="index"
          >
            <van-swipe-cell :right-width="111">
              <div slot="right" @click="clickItem(item,index)" class="div">
                <span class="goText">取消收藏</span>
              </div>
              <div class="item hairline-bottom">
                <div class="div1">
                  <div class="address">
                    {{item.lineName}}
                    <span class="fs-14">(</span>
                    <span class="station">
                      開往
                      {{item.endStationName}}
                    </span>
                    <span class="fs-14">)</span>
                  </div>
                  <div class="time">
                    {{item.stationName}}
                    <span
                      class="time-text"
                      v-show="item.firstBusTime&&item.lastBusTime"
                    >{{item.firstBusTime}}-{{item.lastBusTime}}</span>
                  </div>
                </div>
                <div class="imgBox handle">
                  <!-- <img src="@/assets/sort.png" class="img"> -->
                  <span class="img"></span>
                </div>
              </div>
            </van-swipe-cell>
          </div>
        </transition-group>
      </draggable>
export default {
    data(){},
    computed: {
    dragOptions() {
        return {
            animation: 0,//動畫時間
            group: "description",//分組用的，同一組的不一樣list能夠相互拖動
            disabled: false,//定義是否此sortable對象是否可用，爲true時sortable對象不能拖放排序等功能
            ghostClass: "sortable-ghost",  // 設置拖動元素的class的佔位符的類名。
            chosenClass: "sortable-chosen", // 目標被選中時添加css樣式
            dragClass: "dragClass",//目標拖動過程當中添加css樣式
            fallbackClass: "sortable-fallback", //當forceFallback設置爲true時，拖放過程當中鼠標附着單元的樣式
            scroll: false, //當排序的容器是個可滾動的區域，拖放能夠引發區域滾動
          };
        }
    },
    methods:{
     /**
     * 拖拽時
     */
    move(evt, originalEvent) {
      // 原數據id
      this.moveParam.fromId = evt.draggedContext.element.collId;
      // 目標數據id
      this.moveParam.toId = evt.relatedContext.element.collId;
        //判斷元素是往上移動仍是往下移動
      if (evt.draggedContext.index < evt.relatedContext.index) {
        this.moveParam.move = "down";
      } else {
        this.moveParam.move = "up";
      }
      console.log(evt);
      // console.log(evt.draggedContext.element, "拖拽數據自己");
      // console.log(evt.relatedContext.element, "目標數據自己");
      // console.log(evt.draggedContext.index, "拖拽元素的指針");
      // console.log(evt.relatedContext.index, "目標元素的index");
    },
    /**
     * 拖拽結束
     */
    dragend(evt) {
      this.drag = false;
      return this.$http
        .post(
          "/busColl/coll/move?fromId=" +
            this.moveParam.fromId +
            "&toId=" +
            this.moveParam.toId +
            "&move=" +
            this.moveParam.move
        )
        .then(res => {
          if (res.meta.code == 0) {
            this.$toast(res.data);
          }
        });
    },

    }
}複製代碼