拖拽操作

最新推荐文章于 2022-04-09 16:36:57 发布

菜鸟一个abc122619

最新推荐文章于 2022-04-09 16:36:57 发布

阅读量144

点赞数

分类专栏：原生js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43465609/article/details/106747011

版权

原生js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码区

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>拖拽操作</title>
<style>
   .div1 {
         width:300px;
		 height:300px;
		 background-color:green;
		 border:1px solid red;
		 float:left;
   }
   div > p {
         color:white;
		 padding-left:5px;
         
   }
   .aa {
       width:150px;
	   height:30px;
	   background-color:blue;
   }
   
   .div2 {
         width:300px;
		 height:300px;
		 background-color:green;
		 border:1px solid red;
		 float:left;
		 margin-left:5px;
   }
   	 
</style>
<body> 
<div class="div1"  id="div1">
  <p class="aa" id="ab" draggable="true"> 我是被拖拽元素</p>
</div>
<div class="div2" id="div2"></div>

</body>
<script>
    var p=document.querySelector("#ab");
	var div2=document.querySelector("#div2");
	var div1=document.querySelector("#div1");
//被拖拽元素
	 p.ondragstart = function(){
	  // console.log("ondragstart");
	 }
	 p.ondragleave = function(){
	  // console.log("ondragleave");
	 }
	 p.ondragend = function(){
	  // console.log("ondragend");
	 }
	 
//进入目标元素
    div2.ondragenter = function(){
	  // console.log("ondragenter");
	 }
	div2.ondragover = function(e){
	   //console.log("ondragover");
	   e.preventDefault();
	 }
	div2.ondrop = function(){
	  // console.log("ondrop");
	   div2.appendChild(p);
	 }
	 div2.ondragleave = function(){
	  // console.log("ondragleave");
	 
	 
	 
	 }
	div1.ondragenter = function(){
	 // console.log("ondragenter");
	}
	div1.ondragover = function(e){
	 // console.log("ondragover");
      e.preventDefault();
	}
	div1.ondrop = function(){
	 // console.log("ondrop");
	  div1.appendChild(p);
	}
	div1.ondragleave = function(){
	//  console.log("ondragleave");
	} 
</script>

</html>

在这里插入图片描述

菜鸟一个abc122619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽操作

代码区<!DOCTYPE html><html><meta charset="UTF-8"><title>拖拽操作</title><style> .div1 { width:300px; height:300px; background-color:green; border:1px solid red; float:left; } div > p {
复制链接

扫一扫