vue使用vuedraggable实现拖拽排序布局

import draggable from “vuedraggable”;

      

        
          
            

              
              

                
{{item.name}}
                
ID：{{item.id}}
                
原价{{item.oldPrice}}
                
￥：{{item.price}}
              
            
          
        
      

//拖拽

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