html5拖拽列表，实现列表拖拽移动布局

低价多销

于 2021-07-20 11:48:40 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/lucky_fang/article/details/118931399

版权

前端开发它不香么专栏收录该内容

70 篇文章 56 订阅

订阅专栏

1.前言

在 html5 之前，网页当中实现拖拽要借助到 js 中的 (onmousedown+onmousemove)，现在 html5 内部就支持了拖拽的功能，结合js 能够极大的方便我们实现拖拽功能，但是此功能仅能支持有限的几款浏览器。

2.html5拖拽实现

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter ：当拖拽对象进入投放区时触发；

B.dragover ：拖拽对象在投放区内移动时触发；

C.dragleave ：拖拽对象没有投放到投放区，离开投放区的时候触发；

D.drop ：拖拽对象投放在投放区时触发。

②注意： dragenter 、 dragover 可能会受到默认事件的影响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件

3.实现效果图

4.html，创建两个盒子

<body>
<div id="box">
</div>
<ul id="con">
	<li>java</li>
	<li>js</li>
	<li>html5</li>
	<li>css3</li>
</ul>
</body>

5.css

<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>

6.js动态拖拽核心代码

<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;
	lis[i].flag=false;
	lis[i].ondragstart=function  () {
	 this.flag=true;
	}
	lis[i].ondragend=function  () {
	 this.flag=false;
	}
   }

   box.ondragenter=function  (e) {
     e.preventDefault();
   }
   box.ondragover=function  (e) {
     e.preventDefault();
   }
   box.ondragleave=function  (e) {
     e.preventDefault();
   }
   box.ondrop=function  (e) {
     for (var i=0; i<lis.length; i++) {
	   if(lis[i].flag){
	     box.appendChild(lis[i]);
	   }
     }
     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++) {
	   if(lis[i].flag){
	     con.appendChild(lis[i]);
	   }
     }
     e.preventDefault();
   }
  }
</script>

低价多销

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html5拖拽列表，实现列表拖拽移动布局

1.前言在html5之前，网页当中实现拖拽要借助到js中的 (onmousedown+onmousemove)，现在html5内部就支持了拖拽的功能，结合js能够极大的方便我们实现拖拽功能，但是此功能仅能支持有限的几款浏览器。2.html5拖拽实现①当拖拽对象进入投放区的时候会触发相关的事件 A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投...
复制链接

扫一扫