拖拽事件

拖拽事件：

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

1. 拖拽元素事件：事件对象为被拖拽元素:

   ondragstart 拖拽前触发此事件，拖拽的一瞬间
   ondrag 拖拽前和拖拽结束之间连续触发
   ondragend 拖拽结束触发；

2. 目标元素事件：事件对象为目标元素:

   ondragenter 进入目标元素触发；相当于mouseover >ondragover 进入目标元素和离开目标元素之间连续触发
   ondragleave 离开目标元素触发，相当于mouseout >ondrop 在目标元素上释放鼠标触发；
   要想在目标元素中执行ondrop事件必须在ondragover事件中阻止默认事件：

   el.οndragοver = function(ev) {
     ev.preventDefault();
   };

3. 拖拽对象：

   ev.dataTransfer这个对象中的方法：
   setData(key,value); 当你拖拽一个元素的同时可以设置一个 key 值用来存放被拖拽元素的属性;
   getData();获取数据；根据setData();中设置数据的 key 值获取对应的 value;
   setDragImage(元素,x,y);此方法设置元素被拖拽时跟随鼠标的元素样式以及鼠标的位置;

---

演示 Demo

<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>