html拖拽事件

拖放：drag 和 drop。抓取对象以后拖到另一个位置。

1.设置元素为可拖动

把 draggable 属性设置为 true ：
例如：<div draggable="true" ></div>

2.事件

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
ondragend - 用户完成元素拖动后触发
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

	document.οndragstart=function (e) {
        console.log("开始拖动");
        e.dataTransfer.setData("dongs",e.target.id);
    }
    document.οndrag=function () {
        console.log("拖动过程中");
    }
    var jin=document.getElementsByClassName("jin");
    document.οndragenter=function (e) {
        console.log("进入目标位置");
    }
    document.οndragοver=function(e){
        e.preventDefault();//允许被拖动元素在目标元素中放置（一般不能放置）
    }
    document.οndragleave=function (e) {
        console.log("移出目标位置");
    }
    document.οndrοp=function (e) {
    	console.log("释放鼠标");
        var myid=e.dataTransfer.getData("dongs");
        e.target.appendChild(document.querySelector("#"+myid));
    }
    document.οndragend=function () {
        console.log("拖动完成");
    }

ondragover允许被拖动元素在目标元素中放置（一般不能放置),阻止事件默认行为，通过dragover事件的event.preventDefault