html5拖拽

来源：互联网发布：项目数据库设计编辑：程序博客网时间：2024/06/08 14:30

dragenter：当拖拽对象进入投放区时触发；.dragover：拖拽对象在投放区内移动时触发；.dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；.drop：拖拽对象投放在投放区时触发。.dragstart：当元素拖拽开始触发；drag：在元素拖拽过程中触发；.dragend：元素拖拽结束时触发。使用dataTransfer传递数据dataTransfer有下面的属性和方法：1.types：返回数据的格式；2.getData(<format>)：返回指定格式数据；3.setData(<format>, <data>)：设置指定格式4.clearData(<format>)：移除指定格式数据；

</pre><pre code_snippet_id="1565612" snippet_file_name="blog_20160126_3_7723255" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords"content=""/><meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/><meta name="author"  content="网页作者的资料"><meta name="robots" content="" /><meta http-equiv="Content－Type" content="text/html; charset=gb2312"><title>无标题文档</title><style> #box{  width:200px;height:200px;border:1px solid red; } #con{ width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0; } li{   width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;list-style:none; }</style><script>  window.onload=function  () {   var box=document.getElementById("box");   var con=document.getElementById("con");   var lis=document.getElementsByTagName("li");   for (var i=0; i<lis.length; i++) {    lis[i].draggable=true;//draggable为true时，可拖拽<span style="white-space:pre"></span>lis[i].flag=false;<span style="white-space:pre"></span>lis[i].ondragstart=function  () {<span style="white-space:pre"></span> this.flag=true;//ondragstart 开始拖拽时，当前元素可拖拽，其他不可以<span style="white-space:pre"></span>}<span style="white-space:pre"></span>lis[i].ondragend=function  () {<span style="white-space:pre"></span> this.flag=false;//ondragend 拖拽结束后，当前元素不可拖拽<span style="white-space:pre"></span>}   }   box.ondragenter=function  (e) {     e.preventDefault();//ondragenter开始进入投放区,preventDefault 阻止浏览器默认事件   }   box.ondragover=function  (e) {     e.preventDefault();//ondragover在投放区中移动   }   box.ondragleave=function  (e) {     e.preventDefault();//ondragleave离开投放区   }   box.ondrop=function  (e) {//ondrop表示拖拽元素在投放区时触发。     for (var i=0; i<lis.length; i++) {<span style="white-space:pre"></span>   if(lis[i].flag){<span style="white-space:pre"></span>     box.appendChild(lis[i]);//把拖拽的元素加入到投放区中<span style="white-space:pre"></span>   }     }     e.preventDefault();   }  con.ondragenter=function  (e) {     e.preventDefault();   }   con.ondragover=function  (e) {     e.preventDefault();   }   con.ondragleave=function  (e) {     e.preventDefault();   }   con.ondrop=function  (e) {     for (var i=0; i<lis.length; i++) {<span style="white-space:pre"></span>   if(lis[i].flag){<span style="white-space:pre"></span>     con.appendChild(lis[i]);<span style="white-space:pre"></span>   }     }     e.preventDefault();   }  }</script></head><body><div id="box"></div><ul id="con"><span style="white-space:pre"></span><li>php</li><span style="white-space:pre"></span><li>js</li><span style="white-space:pre"></span><li>html5</li><span style="white-space:pre"></span><li>css3</li></ul></body><span style="font-family: Arial, Helvetica, sans-serif;"></html></span>

0 0