drag事件

1. 原理

• draggable : html元素属性，设置为true，表示该元素可以进行拖动。

• 拖动事件：

1. dragstart: 当元素开始拖动的时候触发；
2. dragover: 当元素拖动到目标容器的时候触发；
3. drop: 当元素拖动到目标容器松开鼠标的时候触发；
4. dataTransfer.setData("StringName",event.target.id)：通过setData的方法向DataTransfer对象添加一个属性，属性名为字符串，值为拖动元素的id

• 完成拖动事件的过程：

1. 设置 [拖动元素] 为可拖动状态（也就是设置元素的draggable的属性为true）；
2. 给 [拖动元素] 添加dragstart事件，并通过事件对象的dataTransfer对象的setData方法设置一个属性。
3. 给 [目标容器] 添加drop事件，再通过事件对象的dataTransfer对象的getDate方法来获取上一步设置的属性，从而获取到拖动元素，然后再通过appendChild方法将拖动元素添加到目标容器。
4. 给 [目标容器] 添加dragover事件，来阻止默认的拖动事件。

2.代码

html

<div class="test">
<!--第一步-->
    <p id="testP" draggable="true">拖动我！</p>
</div>
<div class="test"></div>

css

.test{
    width:100px;
    height:100px;
    border:1px solid black;
}

js

var testP = document.querySelector("#testP");
var test = document.querySelectorAll(".test");

//获取被拖动对象的数据
testP.addEventListener("dragstart",(e)=>{
    e.dataTransfer.setData("DragDate",e.target.id);//dataTransfer.setData
    //第一个参数是属性名，第二个参数是属性值
    //即是通过setData的方法向DataTransfer对象添加一个属性，属性名为字符串，值为拖动元素的id***
})
//第二步           
  //可拖到第二个框
  //禁用默认设置
test[1].addEventListener("dragover",(e)=>{
    e.preventDefault();//阻止e弹回
})
//第三步
  //设置获得的数据再添加到目标容器
test[1].addEventListener("drop",(e)=>{
//获取到拖动元素的id
var data = e.dataTransfer.getData("DragDate");//dataTransfer.getData
//console.log(data);//testP
//通过id获取到拖动元素
let item = document.querySelector("#"+data);
    //将拖动元素放到目标元素中
    test[1].appendChild(item);//**
})
            
            
//可拖回到第一个框
test[0].addEventListener("dragover",(e)=>{
    e.preventDefault();
})
test[0].addEventListener("drop",(e)=>{
    var data = e.dataTransfer.getData("DragDate");
    test[0].appendChild(document.querySelector("#"+data))
})

3.效果

image.png image.png image.png