HTML5实践——拖放

概念

拖放包含拖拽（Drag）和释放（Drop）。

事件相关对象

元素——被拖动的元素

容器——装载的容器

拖放事件

元素：

drag——拖放过程中

dragstart——开始拖放操作

drapend——结束拖放操作

容器：

dragenter——元素开始进入容器范围（未完全进入）

dragover——元素在容器范围（完全进入）

dragleave——元素离开容器

drop——元素在容器里装载了（完成释放动作）

数据处理

e.dataTransfer { }

在拖放事件里，我们使用e.dataTransfer { } 属性处理数据

方法

元素： e.dataTransfer.setData （格式，数据）

容器： e.dataTransfer.getData （格式）

公共： e.preventDefault( ) 阻止默认的些事件方法等执行。

实例

1. 将网页上的元素，拖放到容器上

步骤如下：

1. 拖放开始：
   ondragstart：创建一个函数，用来保存拖动的数据。

2. 设置拖动数据
   setData( )：设置数据类型和值

3. 放入位置
   ondragover：规定容器是哪一个元素

4. 放置
   ondrop：释放元素在容器上

HTML代码

<div id = "box1" class = "box"></div>
<img src="222.jpg" id="tu" height="360px" width="360px" draggable="true">

JS代码

//先声明
var box1Div,msgDiv;

window.onload = function(){
    box1Div = document.getElementById("box1");
    tu = document.getElementById("tu");
	
	//1. 拖放开始：保存数据
	 tu.ondragstart = function(e){
        e.dataTransfer.setData("Text",e.target.id);
    }
    
    //2.放入容器
    box1Div.ondragover = function(e){
        e.preventDefault();
    }
	
	//3.释放
    box1Div.ondrop = function(e){
        e.preventDefault();

        var img = document.getElementById(e.dataTransfer.getData("Text"));
        box1Div.appendChild(img);
    }
}

2. 将本地资源，拖放到容器上

步骤差不多，直接看代码。

HTML代码
<div id="imgContainer"></div>

JS代码
window.onload = function(){
    imgContainer = document.getElementById("imgContainer");
	
	//放入容器
    imgContainer.ondragover = function(e){
        e.preventDefault();
    }
	
	//释放
    imgContainer.ondrop = function(e){
        e.preventDefault();
		
		//files是专门用来显示文件信息的，选中第一个
        var f = e.dataTransfer.files[0];

		//后面将用到FileReader对象，先创建一个实例
        var fileReader = new FileReader();
        
	        //使用readAsDataURL获取到路径信息
            fileReader.readAsDataURL(f);//读取信息

        fileReader.onload = function(e){//读取成功
	        
	        //上面获取到的路径信息，是存储在resulte里面，所以需要取出来
            var img = "<img src=\""+e.target.result+"\"/>";

			//显示到页面上
            imgContainer.innerHTML = img;
        }
    }
}

3. 网页元素拖放到容器上后，被删除

当释放的时候，将内容从dom结构里去除。

HTML代码
	
	<!--容器-->
	<img id="rubbish" src="#">  
  <hr/>  
  <img id="pic1" class="img" src="#">  
  <img id="pic2" class="img" src="#"> 

JS代码

  <script>  
  
    //找到所有图片
    var imgList = document.querySelectorAll('.img'); 
    
    //遍历 
    for(var i=0; i<imgList.length; i++){ 
      var p = imgList[i];  
      p.ondragstart = function(e){ 
        e.dataTransfer.setData("Text",e.target.id);
      }  
      
    }  
  
   //放入容器
    rubbish.ondragover= function(e){    
      e.preventDefault();  
    }  

	//释放
    rubbish.ondrop= function(e){   

     var img = document.getElementById(e.dataTransfer.getData("Text"));
	
	  //删除元素
      img.parentNode.removeChild(img);  
    }  
  
  
  </script>