您的位置：首页 > Web前端 > HTML5

html5拖拽

2016-01-26 06:23 465 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航