HTML5实现图片的拖拽

HTML5元素拖拽drag与拖放drop

元素拖拽

浏览器默认允许我们拖拽图像、文本以及链接
让其它元素被拖动也是可以实现的
只需要在元素标签上添加一个属性

	<img src="0.jpg" width="266"  draggable="true">

draggable属性，默认为true，false即不能拖拽。

拖拽事件

拖拽事件应该分为两类
一类是被拖拽元素触发的事件
另一类是拖放目标元素触发的事件

	<div class="d1">
        <p>源元素</p>
        <img src="0.jpg" width="266"  draggable="true">
    </div>
    <div class="d2"><p>目标元素</p></div>

拖拽元素

拖拽元素的时候，被拖拽元素会触发以下事件

• dragstart
• drag
• dragend

当鼠标点中元素并且开始移动时，就会触发dragstart事件（类比mousedown）
拖拽过程中会持续不断地触发drag事件（类比mousemove）
松开鼠标取消拖拽时就会触发dragend事件（类比mouseup）

		img.ondragstart=function(){
            console.log("开始拖拽");   
        }
        img.ondrag=function(){
            console.log("正在拖拽中");
        }
        img.ondragend=function(){
            console.log("拖拽结束");
        }

目标元素

当拖拽的元素拖到一个目标元素上时，目标元素会触发以下事件

• dragenter
• dragover
• dragleave
• drop

拖拽元素到目标上，就会触发dragenter事件（类比mouseover）
当拖动元素在目标元素中，就会持续触发dragover事件
离开目标元素，触发dragleave事件（类比mouseout）
若拖放元素到了目标元素中（在目标元素中松开鼠标），就会触发drop事件而不会触发dragleave事件

		d2.ondragenter=function(e){ //进入目标元素
            e.preventDefault();
            console.log('进入目标元素');
        }
        d2.ondragover=function(e){ //在目标元素中拖拽
            e.preventDefault();
            console.log('在目标元素中拖拽');
        }
        d2.ondragleave=function(e){ //拖拽离开目标元素
            e.preventDefault();
            console.log('拖拽离开目标元素');
        }
        d2.ondrop=function(e){ //在目标元素中停下
            e.preventDefault();
            console.log('在目标元素中停下');
        }

数据交换

数据交换的对象就是事件对象的属性dataTransfer
dataTransfer的两个核心方法是setData()和getData()
setData()用于设置数据，getData()用于接收数据

接下来看完整例子

	<div class="d1">
        <p>源元素</p>
        <img src="0.jpg" width="266"  draggable="true">
    </div>
    <div class="d2"><p>目标元素</p></div>

		div{
            width: 300px;
            height: 400px;
            border: 1px solid #000;
        }
        .d1{
            float: left;
        }
        .d2{
            float: right;
        }

 		var img=document.getElementsByTagName("img")[0];
        var d1=document.getElementsByClassName("d1")[0];
        var d2=document.getElementsByClassName("d2")[0];
        img.ondragstart=function(e){
         	console.log("开始拖拽");
           //存到event对象中
            e.dataTransfer.setData("text",img.src);   
        }
        d2.ondragenter=function(e){ //进入目标元素
            e.preventDefault();
            console.log('进入目标元素');
        }
        d2.ondragover=function(e){ //在目标元素中拖拽
            e.preventDefault();
            console.log('在目标元素中拖拽');
        }
        d2.ondragleave=function(e){ //拖拽离开目标元素
            e.preventDefault();
            console.log('拖拽离开目标元素');
        }
        d2.ondrop=function(e){ //在目标元素中停下
            e.preventDefault();
            console.log('在目标元素中停下');
            //获取传过来的图片
            var mysrc=e.dataTransfer.getData("text");
            //创建img标签
            var myimg=document.createElement("img");
            //设置属性
            myimg.src=mysrc;
            myimg.width='266';
            //添加img标签
            d2.appendChild(myimg);
            e.dataTransfer.clearData("text");
            //删除源元素里的图片
            d1.removeChild(img);
        }