拖拽事件

drag####

draggable="true"
表示允许拖拽

添加即为ture的属性有:

disabled     checked     multiple    selected  
draggable(允许元素被拖拽)  contenteditable(允许元素内容可被编辑)

不支持IE7,8

拖拽的生命周期
dragstart---drag---dragenter---dragover---dragleave---drop---drapend

    <div class="box1">
        <div class="box3" draggable="true"></div>  <-- 这个div可被拖拽-->
    </div>
    <div class="box2"></div>

<script type="text/javascript">
//拖拽元素
    var box3 = document.querySelector(".box3");
//目标元素
    var target = document.querySelector(".box2");
    //拖拽元素的事件  3个
    box3.ondragstart = function(){
        console.log("拖拽开始");
    }
    box3.ondrag = function(){
        console.log("拖拽中");
    }
    box3.ondragend = function(){
        console.log("拖拽结束");
    }
    //目标元素的事件   4个
    target.ondragenter = function(){
        console.log("进入目标元素");
    }
    target.ondragleave = function(){
        console.log("离开目标元素");
    }
    target.ondragover = function(e){
        console.log("在目标元素上移动");
        //添加阻止事件
        e.preventDefault();  // 阻止浏览器的默认事件 ondrop事件才能被触发
    }
    target.ondrop = function(){
        console.log("在目标元素上放手");
    }
</script>

注意:####

浏览器默认禁止在元素上drop (禁止将其他元素拖拽到目标元素上放手)
需要在dropover时阻止浏览器的默认事件,才得以触发ondrop.