html 5 拖拽事件

draggable="true|false|auto"为了让元素可拖动，需 HTML5 draggable 属性(链接和图片默认可拖动，不需要 )。

1. 在拖动目标上触发事件 (源元素)
   document.ondragstart- 用户开始拖动元素时触发
   ondrag - 元素正在拖动时触发
   ondragend - 用户完成元素拖动后触发
2. 释放目标时触发的事件
   ondragenter - 拖动对象 进入 容器 时触发此事件
   ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件一般阻止默认事件
   ondragleave - 拖动对象 离开 容器 时触发此事件
   ondrop - 拖动释放 时触发此事件

目标元素实时移动过程中改变定位，位置由position定位有效

• 阻止默认事件 才能有效
  document.ondragover = function (e) { e.preventDefault(); }
  3.属性
  dataTransfer.setData("fuzhi",e.target.id)将目标元素 id = fuzhi
  var id = dataTransfer.getData("fuzhi)获取目标元素 id=fuzhi

    var startx,starty,endx,endy;
    document.ondragstart= function (e) {//开始拖动
        startx= e.pageX;
        starty= e.pageY;      
        e.dataTransfer.setData("key", e.target.id);//开始拖动时设置 设置目标元素 id     
    }
    document.ondragend= function (e) {//拖动结束***定位改变
        endx= e.pageX;
        endy= e.pageY;
        var cx=endx-startx;
        var cy=endy-starty;
        var left= parseInt(e.target.style.left) ;
        var top= parseInt(e.target.style.top);
        e.target.style.left=(left+cx)+"px"; //赋值=初始位置+偏移值
        e.target.style.top=(top+cy)+"px";
        //console.log("结束拖动：","cx"+cx,"cy"+cy,"left"+left,"top"+top);
    }
    OR
    document.ondragover= function (e) {
        e.preventDefault();
    }
    document.ondrop= function (e) {//拖动释放
        var id=e.dataTransfer.getData("key"); //获取目标元素 id
        console.log(e.target,id);
        e.target.appendChild(document.querySelector("#"+id)); //将目标元素添加到目标容器 
    }