如何用js实现拖放效果？

最新推荐文章于 2024-01-02 14:01:32 发布

玖.儿

最新推荐文章于 2024-01-02 14:01:32 发布

阅读量392

点赞数 1

分类专栏： HTML5

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如何用js实现拖放效果

拖放是HTML5新出的组成部分，在HTML5之前的版本是没有这部分的，它的组成单词又为drag(拖)、drop(放)，所以其代码的写法也是围绕这两个单词的组成(前缀后缀)来写的。

拖放：顾名思义就是拖着对象把它放到另一个位置。

接下来了解一下拖放：

draggable属性

定义和用法：规定元素是否拖动。

语法：

<elemet draggable="true/false/auto">

属性值的含义：

属性值	含义
true	规定元素为可拖动的
false	规定元素为不可拖动的
auto	使用浏览器的默认样式

注：只有在元素中添加draggable属性，元素才能拖动；链接和图像默认是可拖动的，所以不需要添加draggable属性。

拖动对象时触发的事件

事件	含义
dragstart	刚开始拖动元素时触发
drap	拖动元素的过程
dragend	结束拖动元素时触发

释放对象时触发的事件

事件	含义
dragenter	当被鼠标拖动的元素进入其容器范围内时触发此事件
dragover	当被拖动的元素在另一元素容器范围内拖动时触发此事件
dragleave	当被鼠标拖动的元素离开其容器范围内时触发此事件
drop	在拖动的过程中，释放鼠标时触发此事件

接下来来总结一下上面的用法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>如何实现拖放</title>
<style>
	.dropgoal{
		float: left;
		width:100px;
		height:50px;
		margin: 15px;
		padding: 5px;
		border: 1px solid #3E3E3E;
	}
</style>
</head>

<body>
	<p>在两个矩形框中来回拖动 p 元素:</p>
	<div class="dropgoal">
	    <p draggable="true" id="draggoal">拖动我!</p>
	</div>
	<div class="dropgoal"></div>
	<p id="demo"></p>
	
	<script>
        //拖动时触发下面函数
		//addEventListener()方法用于向指定元素添加事件，
        //可以使用removeEventListener()方法来移除addEventListener()方法添加的事件
		 document.addEventListener("dragstart",function(event){
			 //dataTransfer.setData()方法设置数据类型(Text)和拖动的数据
			 event.dataTransfer.setData("Text",event.target.id);
			 // 拖动p元素时输出一些文本
			 document.getElementById("demo").innerHTML="开始拖动 p 元素"
			  //修改拖动元素的透明度
			 event.target.style.opacity="0.5";
		  });
		
		  //在拖动p元素的同时,改变输出文本的颜色
		  document.addEventListener("drag",function(event){
			 document.getElementById("demo").style.color="red"; 
		  });
		
		  // 当拖完p元素输出一些文本元素和重置透明度
		  document.addEventListener("dragend", function(event){
			 document.getElementById("demo").innerHTML="完成 p 元素的拖动";
    		 event.target.style.opacity="1";
 		  });
		
		 //拖动完成后触发 
        // 当p元素完成拖动进入矩形框时,改变div的边框样式
		  document.addEventListener("dragenter",function(event){
			 if(event.target.className=="dropgoal"){
				 event.target.style.border="2px dotted blue";
			 } 
		  });
		
		  // 默认情况下,数据/元素不能在其他元素中被拖放。
          //对于drop我们必须防止元素的默认处理，
          //使用preventDefault()方法来取消事件的默认动作
		  document.addEventListener("dragover", function(event){
		     event.preventDefault();
		  });
		
		  // 当可拖放的p元素离开矩形框，重置div的边框样式
		  document.addEventListener("dragleave", function(event){
			 if( event.target.className=="dropgoal" ) {
				  event.target.style.border="";
			  }
		  });
		
		  /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
            复位输出文本的颜色和div的边框颜色
           利用dataTransfer.getData()方法获得拖放数据
		   appendChild()方法向节点添加最后一个子节点(从一个元素向另一个元素中移动元素)
           拖放的数据元素id("drag1")
           拖拽元素附加到drop元素*/
		  document.addEventListener("drop", function(event) {
			  if ( event.target.className == "dropgoal" ) {
			    	document.getElementById("demo").style.color = "";
			    	event.target.style.border = "";
			    	var data = event.dataTransfer.getData("Text");
				    event.target.appendChild(document.getElementById(data));
			  }
		});
	</script>
</body>
</html>

效果图：

这是拖放前的图：

这是拖放后的图：

拖放的写法还有很多，就根据自己想要的来写，好了，今天的分享就到这里，如有不懂，请留言！

玖.儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用js实现拖放效果？

如何用js实现拖放效果拖放是HTML5新出的组成部分，在HTML5之前的版本是没有这部分的，它的组成单词又为drag(拖)、drop(放)，所以其代码的写法也是围绕这两个单词的组成(前缀后缀)来写的。拖放：顾名思义就是拖着对象把它放到另一个位置。接下来了解一下拖放： draggable属性定义和用法：规定元素是否拖动。语法：&l...
复制链接

扫一扫