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>