JS+DIV 实现拖动

最新推荐文章于 2023-11-30 08:39:27 发布
最新推荐文章于 2023-11-30 08:39:27 发布
阅读量3.1k 收藏 9
点赞数 2
分类专栏： JavaScript 文章标签： 拖动 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/90177809
版权

效果如下：在这里插入图片描述
源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
	<title></title>
	<style>
	  div{
		  width:300px;
			height:400px;
			background:url(img/1.jpg) no-repeat ;
			background-size:cover;
			position:absolute;
		}
	</style>
	<script>
	window.onload=function(){
	  var div= document.getElementsByTagName("div")[0];
		//1 div.onmousedown
		//2 document.onmousemove
		//3 document.onmouseup
		// var isDrag= false;
		var distanceX,distanceY;
		//按下鼠标时，定义事件
		div.onmousedown =function(evt){
		  evt= evt||window.event;
		  isDrag= true;
			//console.log("isDrag:"+isDrag);
			//保存鼠标相对于div的偏移量
			distanceX= evt.offsetX;
			distanceY= evt.offsetY;
			// 按下鼠标时，定义document的移动事件
			document.onmousemove=function(evt){
				evt= evt||window.event;
				console.log(isDrag+" onmousemove");
				// if(isDrag){
					// div.style.left= evt.clientX- distanceX+"px";
					// div.style.top = evt.clientY- distanceY+"px";
					var divLeft= evt.clientX- distanceX;
					var divTop = evt.clientY- distanceY;
					var maxLeft= document.documentElement.clientWidth- div.offsetWidth;
					var maxTop = document.documentElement.clientHeight- div.offsetHeight;
					//console.log(document.documentElement.clientHeight);
					if(divLeft<0){
						divLeft=0;
					}
					if(divTop<0){
						divTop=0;
					}
					if(divLeft> maxLeft){
						divLeft= maxLeft;
					}
					if(divTop >maxTop){
						divTop= maxTop;
					}
					
					div.style.left= divLeft+"px";
					div.style.top = divTop+"px";
				// }
				 return false;
			}
			//按下鼠标时，定义document的鼠标弹起事件
			document.onmouseup= function(){
				// isDrag =false;
				// console.log(isDrag + " onmouseup");
				document.onmousemove = null;
				document.onmouseup= null;
			}
			}
		
	}
	</script>
  </head>
  <body>
		 <div></div>
	</body>
</html>
乐夫天命兮
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现div的拖拽
weixin_50337713的博客
03-30 7573
拖拽：在div上按下鼠标，移动鼠标，移动过程中让div跟随鼠标移动 分析： 给div绑定鼠标按下事件 - 在按下的事件中继续绑定移动事件 div移动：设置left和top - 给div设置定位 left 和 top 的值是多少？ 获取鼠标的位置 ，就是 left 和 top left 和 top =鼠标在浏览器中位置 减去 一开始鼠标是div上的位置 <style> .box{ width: 100px; height: 100px;
JS网页图片查看器－可控制图片放大缩小还原移动效果
YanMLover的博客
04-16 1761
JS网页图片查看器－可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0
javascript实现拖拽div效果
shuffle_boy的博客
04-08 102
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>拖拽效果限制范围-蚂蚁部落</title> <style type...
实现div拖拽的几种方式
Hiqingtian的博客
03-23 9864
&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery拖放&lt;/title&gt; &lt;scri
div增加拖动效果
Lizejin961019的博客
03-09 374
一、添加drag.js文件。 import Vue from 'vue'; //使用Vue.directive()定义一个全局指令 //1.参数一：指令的名称，定义时指令前面不需要写v- //2.参数二：是一个对象，该对象中有相关的操作函数 //3.在调用的时候必须写v- const drag = Vue.directive('drag',{ //1.指令绑定到元素上回立刻执行bind函数，只执行一次 //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
JS+DIV实现拖动效果
10-15
《JS+DIV实现拖动效果详解》 在网页交互设计中，实现元素的拖动功能是一项常见的需求，这能够为用户提供直观、便捷的操作体验。本文将详细讲解如何利用JavaScript和HTML的DIV元素来实现这一效果，并探讨优化方法。 ...
JS+DIV实现的卷帘效果示例
10-20
主要介绍了JS+DIV实现的卷帘效果,结合具体实例形式对比分析了javascript响应鼠标事件动态操作页面元素属性实现展开与折叠效果的相关操作技巧,需要的朋友可以参考下
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置
04-02
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
使用divDrag实现vue拖拽效果
weixin_43920582的博客
03-09 413
新建文件 divDrag.js export default function drag(el) { let dragBox = el; //获取当前元素 dragBox.onmousedown = e => { //算出鼠标相对元素的位置 let disX = e.clientX - dragBox.offsetLeft; let disY = e.clientY - dragBox.offsetTop; documen
可拖动DIV层的实现方法
热门推荐
2byte
06-15 1万+
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲讲实现方法与关键点。先来看看效果：在线实例DEMO基本思路 有一个DIV层，设定position属性为absolute或fixed，通过更改其left，top来更改层的相对位置。 在DIV层上绑定
JS实现可拖拽div
Dax1_的博客
03-28 1197
注意点 可拖拽元素为绝对定位 分别监听mousedown，mousemove，mouseup三个事件 mousemove事件要判断dragging的值 <div id="box"></div> <style> #box { position: absolute; // 重要 border: 1px solid red; height: 100px; width: 100px; } <
拖拽化、低代码、可视化布局学习资料搜集
weixin_37391237的博客
05-15 4865
整理收集的可视化布局平台
js 实现div的拖动效果
2302_77290281的博客
05-18 954
})
js实现div拖动
src_chao1的博客
02-13 3849
大致思路： 鼠标按下并且移动的时候，使得鼠标点击的div跟随鼠标移动，松开按键或者鼠标移开div时，div不跟随移动。而图层跟随鼠标移动只需要计算出鼠标的移动位置相对于鼠标按下时的原位置，就可以得到偏移量，再用图层的原位置减去偏移量，就是图层的移动后位置。所以大致分为三个步骤。 首先，鼠标的按下事件 let flag = 0; //确定该图层是否鼠标处于按下状态 let oldMX = 0 //鼠标的原X位置 let oldMY = 0 //鼠标的原Y...
元素的拖拽属性drag
Listner的博客
02-04 1195
拖拽属性（drag）： 是指鼠标点击源对象后，不松手将其拖拽到目标对象或者半途释放的过程（是H5的新属性） 源对象：指鼠标点击的内容 目标对象：指拖动源对象预计进入的区域 源对象可触发的事件： ondragstart 源对象开始被拖动 ondrag 源对象拖拽中（松手时无法读取鼠标的坐标，x,y会变成0，需要添加if判断来选择将其不赋值给元素） ondragend 源对象拖拽结束 源对象进...
从基础到进阶：实现div控件的拖拽和缩放功能
最新发布
Twinkle_sone的博客
11-30 2881
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
使用v-drag实现div盒子拖拽放大缩小
????鱼干～
03-02 1880
使用v-drag实现div盒子拖拽放大缩小
js拖拽网格布局js特效
ICode联盟
09-25 251
js拖拽网格布局特效，可以用作图片拖拽。
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4097
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
使用js+html+css实现鼠标移动div教程
"使用JavaScript、HTML和CSS实现鼠标移动div的实例教程" 在Web开发中，动态交互效果是提升用户体验的重要手段之一。本实例教程详细介绍了如何利用JavaScript、HTML和CSS来实现一个简单的功能：当鼠标在页面上移动时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值