import draggable from “vuedraggable”;

<!-- 拖拽 -->
      <div class="content">
        <draggable v-model="shopList" @update="datadragEnd" :options="{animation:500}">
          <transition-group class="clearfix">
            <div v-for="item in shopList" :key="item.id" class="drag-item clearfix">
              <img src="../../../../../assets/images/user-img.png" alt />
              <ul>
                <li>{{item.name}}</li>
                <li>ID：{{item.id}}</li>
                <li>原价{{item.oldPrice}}</li>
                <li>￥：{{item.price}}</li>
              </ul>
            </div>
          </transition-group>
        </draggable>
      </div>

//拖拽

   shopList: [
        {
          id: 11111,
          name: "哈阿达哈",
          oldPrice: 152,
          price: 55
        },
        {
          id: 151,
          name: "有哈",
          oldPrice: 155,
          price: 55
        },
        {
          id: 1515,
          name: "哈哈哈",
          oldPrice: 152,
          price: 55
        },
        {
          id: 1511,
          name: "的是哈",
          oldPrice: 152,
          price: 55
        },
        {
          id: 888811,
          name: "根深蒂固哈",
          oldPrice: 152,
          price: 55
        }
      ],

//拖拽

  getdata(evt) {
      console.log(evt.draggedContext.element.text);
    },
    datadragEnd(evt) {
      evt.preventDefault();
      console.log("拖动前的索引 :" + evt.oldIndex);
      console.log("拖动后的索引 :" + evt.newIndex);
      console.log(this.shopList);
    }

  mounted() {
    //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
  }