html5拖拽

最新推荐文章于 2024-08-08 23:38:27 发布

不是我的货

最新推荐文章于 2024-08-08 23:38:27 发布

阅读量382

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/wym1581/article/details/50584977

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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.οnlοad=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].οndragstart=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].οndragend=function  () {
<span style="white-space:pre">	</span> this.flag=false;//ondragend 拖拽结束后，当前元素不可拖拽
<span style="white-space:pre">	</span>}
   }


   box.οndragenter=function  (e) {
     e.preventDefault();//ondragenter开始进入投放区,preventDefault 阻止浏览器默认事件
   }
   box.οndragοver=function  (e) {
     e.preventDefault();//ondragover在投放区中移动
   }
   box.οndragleave=function  (e) {
     e.preventDefault();//ondragleave离开投放区
   }
   box.οndrοp=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.οndragenter=function  (e) {
     e.preventDefault();
   }
   con.οndragοver=function  (e) {
     e.preventDefault();
   }
   con.οndragleave=function  (e) {
     e.preventDefault();
   }
   con.οndrοp=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>