拖拽Apl的简单使用

使用前需设置必要的属性draggable

<div class="drag" draggable="true"></div>

其包含的事件：

1.drag:当拖拽元素或选中的文本时触发.

2.dragstart:当用户开始拖拽一个元素或选中的文本时触发.

3.dragend:当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)

4.dragenter:当拖拽元素或选中的文本到一个可释放目标时触发

5.dragleave:当拖拽元素或选中的文本离开一个可释放目标时触发。

6.dragover:当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）

7.drop:当元素或选中的文本在可释放目标上被释放时触发,为确保drop正常使用，最好在前置 dragover事件中禁用默认行为

<div class="drop" ondrog="drop" ondragover.prevent=""></div>

举一个实例

 <div v-for="good in goods":key="good.name" class="class" 
draggable="true" @dragstart="start(event,good)"></div>    
                                        // 若为@dragstart="start"
                                         //打印good将为undefine

 goods:[
    {
        name:"李子",
        price:20,
        src:"./li.jpg"
    },
    {
        name:"桃子",
        price:200,
        src:"./tao.jpg"
    },
    {
        name:"小子",
        price:2000,
        src:"./xiao.jpg"
    }
   ]

start(item,good){
      console.log(item.target) //将打印你拖拽的元素 
     
      item.dataTransfer.setData('key', JSON.stringify(good));
      console.log(JSON.parse(item.dataTransfer.getData("key"))) //若你拖拽的为名为“李子”的{name="李子"，price="20",src="./li.jpg"}
    }
//此代码不完整

dataTransfer 事件为drag的属性，setData()能给拖拽的数据添加数据 

可在蓝桥杯前端真题趣购（2426）实践

该题题解：

 computed: {
    totalPrice() {
      let money=0;
      this.bought.forEach((item)=>{
        money += item.price
      })
      return money;
    },
    goodsDetail() {
      let str = ""
      let obj = {1:0}; //通过对象来储存拖拽的物品名以及次数
      this.bought.forEach(item=>{
       for (const key in obj) {
        if(key == item.name){
          obj[key]++;
          break; 
        }
        if(key != item.name){
          obj[item.name] = 1;
        }
       }
       
      })  
      for (const key in obj) {
        if(key!=1){
          str += key+'*'+obj[key]+" "; 
        }
      }
      return str;
    },
  },

  methods: {
    start(item,good){
      item.dataTransfer.setData("key", JSON.stringify(good))
    },
    end(item){
      let a = JSON.parse(item.dataTransfer.getData("key"))
      this.bought.push(a)
    }
  },