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

    }
}复制代码