事件 —【拖拽事件】

拖拽事件：
拖拽前要给每个元素都添加draggable='true';才能让元素进行拖拽

1、拖拽元素事件：事件对象为被拖拽元素:
.ondragstart 拖拽前触发此事件，拖拽的一瞬间
.ondrag      拖拽前和拖拽结束之间连续触发
.ondragend   拖拽结束触发；

2、目标元素事件：事件对象为目标元素:
.ondragenter 进入目标元素触发；相当于mouseover
.ondragover 进入目标元素和离开目标元素之间连续触发
.ondragleave  离开目标元素触发，相当于mouseout
.ondrop 在目标元素上释放鼠标触发；
!!!要想在目标元素中执行ondrop事件必须在ondragover事件中阻止默认事件：
目标元素.οndragοver=function(ev){
ev.preventDefault();
}

3、拖拽对象：
ev.dataTransfer
这个对象中的方法：
(1)setData(key,value); 当你拖拽一个元素的同时可以设置一个key值用来存放被拖拽元素的属性；
(2)getData();获取数据；根据setData();中设置数据的key值获取对应的value；

(3)setDragImage(元素,x,y);此方法设置元素被拖拽时跟随鼠标的元素样式以及鼠标的位置；

代码展示：

<div class="box">
    <p>2313132</p>
    <span>哈哈哈</span>
</div>
<div class="box1"></div>
<script>
    var box=document.getElementsByClassName('box')[0];
    var box1=document.getElementsByClassName('box1')[0];
    box.setAttribute('draggable','true');  //拖拽前要给每个元素添加draggable-true属性；
    box1.setAttribute('draggable','true');
    box.ondragstart=function(event){ //拖拽的一瞬间触发此事件
        event.dataTransfer.setData('a',this.innerHTML)  //创建一个新的对象来盛放box
        var boxX=box.offsetWidth/2;     //优化鼠标位置
        var boxY=box.offsetHeight/2;    //让拖拽的鼠标始终在box的中间
        event.dataTransfer.setDragImage(this,boxX,boxY); //设置元素被拖拽时跟随鼠标的元素样式以及鼠标的位置
    }
    box.ondrag=function () {        //拖拽过程中一直执行
        this.style.visibility='hidden';    //让当前的盒子隐藏
    }
    box.ondragend=function () {         //拖拽结束的时候触发
        this.style.visibility='visible';    //让当前盒子显示
    }
    box1.ondragenter=function () {      //box被拖拽进入大盒子的一瞬间触发

    }
    box1.ondragover=function (event) {  //box在大盒子中移动时一直触发
        event.preventDefault();         //如果想要在ondrop中执行事件，就一定要在ondrapover中阻止事件
    }
    box1.ondrop=function (event) {      //在目标元素上释放鼠标时触发
        var box2=document.createElement('div'); //在页面创建一个新的div元素
        box2.className='box';           //给其添加box的类名，模拟复原其css样式
        box2.innerHTML=event.dataTransfer.getData('a')  //然后把盛放box的对象a赋予给新元素上
        this.append(box2)                  //在box1中添加新元素
        var aX=event.offsetX-box.offsetWidth/2;     //优化获取位置
        var aY=event.offsetY-box.offsetHeight/2;
        console.log(aX);
        console.log(aY);
        box2.style.marginLeft=aX+'px';
        box2.style.marginTop=aY+'px';
        box.remove();                       //最后在此删除原来的box元素
    }
    box1.ondragout=function () {            //当被拖拽的元素离开此元素一瞬间时触发的

    }
</script>