使用原生技js实现拖拽效果

最新推荐文章于 2024-04-15 15:42:58 发布
最新推荐文章于 2024-04-15 15:42:58 发布
阅读量775 收藏
点赞数
分类专栏： JS HTML/CSS 文章标签： javascript 拖拽 画板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyichunecnu/article/details/52330668
版权

1. 简单拖拽效果，单div拖拽

利用mousedown,mousemove和mouseup事件，获得最后鼠标的位置然后更新元素即可

2.单div缓缓移动到新的位置并且改变透明度

原理和1相同，只不过使用了第二个变量，创建动画效果，并且从dom中移除第一个元素，并且给新元素设置opacity

3.使用这个效果做一个类似于画板的功能，即想象左侧一栏各种形状，右边是编辑板，将左边的形状拖动到编辑版中

以上三项代码：





   
   
拖拽




   
   


   
   

<script	type="text/javascript">
	var	div	= document.getElementsByTagName('div')[0];
	var	zIndex = 6;
	drag(div);
	function drag(oDrag) {
		var	disX = dixY	=	0;
		oDrag.onmousedown	=	function(event)	{
			var	event	=	event	|| window.event;
			disX = event.clientX - this.offsetLeft;
			disY = event.clientY - this.offsetTop;
			document.onmousemove = function(event) {
				var	event	=	event	|| window.event;
				var	iL = event.clientX - disX;
				var	iT = event.clientY - disY;
				var	maxL = document.documentElement.clientWidth	-	oDrag.offsetWidth;
				var	maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
				iL <=	0	&& (iL = 0);
				iT <=	0	&& (iT = 0);
				iL >=	maxL &&	(iL	=	maxL);
				iT >=	maxT &&	(iT	=	maxT);
				oDrag.style.left = iL	+	"px";
				oDrag.style.top	=	iT + "px";
				return false;
			};
			document.onmouseup = function()	{
				document.onmousemove = null;
				document.onmouseup = null;
				oDrag.releaseCapture &&	oDrag.releaseCapture()
				};
			this.setCapture	&& this.setCapture();
			return false;
		}
	}
</script>





   
   
无标题文档




   
   


   
   

<script	type="text/javascript">
	var	div	=	document.getElementsByTagName('div')[0];
	var	zIndex = 6;
	drag(div);
	function drag(oDrag) {
		var	disX = dixY	=	0;
		oDrag.onmousedown	=	function(event)	{
			var	event	=	event	|| window.event;
			disX = event.clientX - this.offsetLeft;
			disY = event.clientY - this.offsetTop;
			var	oTemp	=	this.cloneNode(true);
			document.body.appendChild(oTemp);
			document.onmousemove = function(event) {
				var	event	=	event	|| window.event;
				var	iL = event.clientX - disX;
				var	iT = event.clientY - disY;
				var	maxL = document.documentElement.clientWidth	-	oDrag.offsetWidth;
				var	maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
				iL <=	0	&& (iL = 0);
				iT <=	0	&& (iT = 0);
				iL >=	maxL &&	(iL	=	maxL);
				iT >=	maxT &&	(iT	=	maxT);
				oTemp.style.zIndex = zIndex++;
				oTemp.style.opacity	=	"0.5";
				oTemp.style.filter = "alpha(opacity=50)";
				oTemp.style.left = iL	+	"px";
				oTemp.style.top	=	iT + "px";
				return false;
			};
			document.onmouseup = function()	{
				document.onmousemove = null;
				document.onmouseup = null;
				oDrag.style.opacity	=	oTemp.style.opacity;
				var	arr	=	{
				    left:	oTemp.offsetLeft,
				    top: oTemp.offsetTop
				};
				oDrag.style.zIndex = oTemp.style.zIndex;
				oAnimate(oDrag,	arr, 300,function() {
					document.body.removeChild(oTemp);
				});
				oDrag.releaseCapture &&	oDrag.releaseCapture()
				};
				this.setCapture	&& this.setCapture();
				return false;
			}
		}
		function oAnimate(obj, params, time, handler)	{
		    var	node = typeof	obj	== "string"	?	$(obj) : obj;
		    var	_style = node.currentStyle ? node.currentStyle:	window.getComputedStyle(node,	null);
		    var	handleFlag = true;
		    for	(var p in	params)	{	(function()	{
		        var	n	=	p;
		        if (n	== "left"	|| n ==	"top") {
		            var	_old = parseInt(_style[n]);
		            var	_new = parseInt(params[n]);
	                var	_length	=	0,
		            _tt	=	10;
		            if (!isNaN(_old))	{
		                var	count	=	_old;
		                var	length = _old	<= _new	?	(_new	-	_old)	:	(_old	-	_new);
		                var	speed	=	length / time	*	_tt;
		                var	flag = 0;
		                var	anim = setInterval(function()	{
                    		node.style[n]	=	count	+	"px";
                    		count	=	_old <=	_new ? count + speed:	count	-	speed;
                    		flag +=	_tt;
		                    if (flag >=	time)	{
                        		node.style[n]	=	_new + "px";
                        		clearInterval(anim);
                            	if (handleFlag)	{
		                            handler();
                        		    handleFlag = false;
                        		}
		                    }
	                	},_tt);
		            }
		        }
		    })();
	        }
	    }
</script>





   
   
无标题文档




   
   

	
    
    

		
     
     

		
     
     

	
    
    

	
    
    


   
   

<script	type="text/javascript">
	var	div	=	document.getElementById('div');
	var	zIndex = 6;
	drag(div);
	function drag(oDrag) {
		var	disX = dixY	=	0;
		oDrag.onmousedown	=	function(event)	{
			var	event	=	event	|| window.event;
			disX = event.clientX - this.offsetLeft;
			disY = event.clientY - this.offsetTop;
			var	oTemp	=	this.cloneNode(true);
			document.body.appendChild(oTemp);
			document.onmousemove = function(event) {
				var	event	=	event	|| window.event;
				var	iL = event.clientX - disX;
				var	iT = event.clientY - disY;
				var	maxL = document.documentElement.clientWidth	-	oDrag.offsetWidth;
				var	maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
				iL <=	0	&& (iL = 0);
				iT <=	0	&& (iT = 0);
				iL >=	maxL &&	(iL	=	maxL);
				iT >=	maxT &&	(iT	=	maxT);
				oTemp.style.zIndex = zIndex++;
				oTemp.style.opacity	=	"0.5";
				oTemp.style.filter = "alpha(opacity=50)";
				oTemp.style.left = iL	+	"px";
				oTemp.style.top	=	iT + "px";
				oTemp.removeAttribute('id');
				return false;
			};
			document.onmouseup = function()	{
				document.onmousemove = null;
				document.onmouseup = null;
				
				//oDrag.style.opacity	=	oTemp.style.opacity;
				var	arr	=	{
					left:	oTemp.offsetLeft,
					top: oTemp.offsetTop
				};
				console.log(arr.left);
				console.log(document.getElementById('leftPanel'));
				if(arr.left < document.getElementById('leftPanel').offsetWidth){
					document.body.removeChild(oTemp);
				}
				oDrag.style.zIndex = oTemp.style.zIndex + 1;
				oDrag.releaseCapture &&	oDrag.releaseCapture()
				};
				this.setCapture	&& this.setCapture();
				return false;
			}
		}
		function oAnimate(obj, params, time, handler)	{
	    var	node = typeof	obj	== "string"	?	$(obj) : obj;
	    var	_style = node.currentStyle ? node.currentStyle:	window.getComputedStyle(node,	null);
	    var	handleFlag = true;
	    for	(var p in	params)	{	(function()	{
	        var	n	=	p;
	        if (n	== "left"	|| n ==	"top") {
	            var	_old = parseInt(_style[n]);
	            var	_new = parseInt(params[n]);
                var	_length	=	0,
	            _tt	=	10;
	            if (!isNaN(_old))	{
	                var	count	=	_old;
	                var	length = _old	<= _new	?	(_new	-	_old)	:	(_old	-	_new);
	                var	speed	=	length / time	*	_tt;
	                var	flag = 0;
	                var	anim = setInterval(function()	{
                  		node.style[n]	=	count	+	"px";
                  		count	=	_old <=	_new ? count + speed:	count	-	speed;
                  		flag +=	_tt;
	                    if (flag >=	time)	{
                      		node.style[n]	=	_new + "px";
                      		clearInterval(anim);
                          	if (handleFlag)	{
	                            handler();
                      		    handleFlag = false;
                      		}
	                    }
                	},_tt);
	            }
	        }
	    })();
     }
		}
</script>
丙申年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现拖拽效果
01-18
本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下 想要让整个元素移动需要三个事件： 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <div id=login class=login> <!-- 点击title拖拽 --> <div id=title class=login-title>登录会员 <!-- title end --> <span><a>关
支持移动触摸设备的纯js元素拖放插件
01-20
支持移动触摸设备的纯js元素拖放插件
web页面下的元素拖拽插件，纯js，有Demo
05-15
web页面下的元素拖拽插件，纯js，并且有.net的实例
原生js实现可拖动的登录框效果
10-20
本文主要介绍了原生js实现可拖动的登录框效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
原生js实现拖拽移动与缩放效果
11-19
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码，供大家参考，具体内容如下 效果图如下-实现了简单的拖拽和缩放功能 第一步—简单的拖拽功能 // 创建一个MoveClass构造函数 function MoveClass(id, options = {}) { // 绑定ele属性 this.ele = document.querySelector(id); this.move(); } // 给MoveClass原型上绑定move方法 MoveClass.prototype.move = function () { // ele的鼠标按下事件调用mousedown
JS实现拖拽功能
热门推荐
weixin_46831501的博客
03-04 1万+
记录一下新学习到的拖拽功能。 H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图： 接着就是上代码： HTML以及CSS部分：比较简单就不多说了 <div class="wrapper"> <section class="show"> <h1>拖动你喜欢的图片</h1> <div class="tshirt"> <img s
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1315
Document
原生js实现四种拖拽效果
06-13
四种拖拽效果：只可在浏览器中拖拽；可超出浏览器拖拽；点击头部在浏览器中拖拽；点击头部可超出浏览器拖拽
原生js实现拖拽功能
weixin_47450807的博客
03-09 3894
一、写在前面 如果我们想要实现拖拽的功能，必须要知道三个事件： 1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件 二、实现思路 我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标， 这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏 览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事 件和鼠标抬起事件。 三、代码 <div id="drag"&g
JS拖动插件
03-04
Dragula 是一个 JavaScript 库，实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。 特性 超级易于使用 没有臃肿的依赖 计算出自身的排序顺序 阴影将放置该项目提供可视反馈 触摸事件！
原生JS使用Canvas实现拖拽式绘图功能
12-11
一、实现的功能 1、基于oop思想构建，支持坐标点、线条（由坐标点组成，包含方向）、多边形（由多个坐标点组成）、圆形（包含圆心坐标点和半径）等实体 2、原生JavaScript实现，不依赖任何第三方js库和插件 3、多图形绘制（支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制） 4、拖拽式绘制（鼠标移动过程中不断进行canvas重绘） 5、图片绘制（作为背景图片时重绘会发生闪烁现象，暂时有点问题，后面继续完善） 5、清空绘制功能 6、新版本优化绘制性能（使用共享坐标变量数组，减少了大量的对象创建操作） 7、新版本支持箭头绘制功能 二、完整实现代码 DrawingToo
原生js实现可拖拽效果
10-20
本文主要介绍了原生js实现可拖拽效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
weixin_34217711的博客
12-31 1830
前言 关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处理这些细节，经过翻阅 jquery ui 的源码才找到答案。 拖拽实现 关于拖拽功能不再啰嗦，直接贴代码 /** * [draggable 拖拽方法] * @param ...
js 实现拖拽效果
On The Way
06-14 562
js onmousedown，onmousemove，onmouseup实现简单的拖拽：<!docType html> <html> <head> <style type="text/css"> #drag { position: relative; /*必须设置position*/ width: 100px; height: 100px;
js html5新属性 元素拖拽
细节怪的博客
09-19 349
js 实现元素拖拽效果
JavaScript 拖放效果 —— 小拖放也有大智慧
ama7449的博客
11-20 250
拖放效果，也叫拖拽、拖动，学名Drag-and-drop ，是最常见的js特效之一。 如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。 这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。 虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地方可以改善，某个地方有错误，某些需求需要实现，就...
原生js实现窗口拖拽方法封装
nuojin2886的博客
11-02 118
/**窗口拖拽方法 * @param {HTMLElement} oDrag div元素 * @param {HTMLElement} handle 标题内容 */ drag(oDrag, handle) { if (!(oDrag instanceof HTMLElement)) { return } if (handle && !(handle instanceof HTMLElement)) { ...
使用 Fetch API 执行 GraphQL 查询和变体
最新发布
ikxin的博客
04-15 1120
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
原生js实现拖拽div
08-07
### 回答1： 我可以提供一些指引：要实现拖拽div，你首先需要监听div的mousedown，mouseup和mousemove事件。然后记录鼠标的坐标，并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2： 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例： 首先，在 HTML 中添加一个可拖拽的 div 元素： ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中，我们可以通过监听一些事件来实现拖拽的效果。首先，我们需要监听 div 的 mousedown 事件，当鼠标按下时开始拖拽。然后，我们需要监听鼠标移动事件来更新 div 的位置。最后，在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中，我们通过计算鼠标点击位置与 div 左上角的偏移量，然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发，从而使得 div 跟随鼠标的移动而移动。最后，当鼠标抬起时，我们需要移除事件监听，停止拖拽。 通过以上代码，我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动时，div 会跟随鼠标的移动而移动，当鼠标抬起时停止拖拽。 ### 回答3： 要实现拖拽div的效果，可以使用原生JavaScript来完成。具体步骤如下： 1. 首先，在HTML中创建一个div元素，并给它设置一个id，用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中，创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器，当鼠标按下时，开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中，记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数，在该函数中，根据鼠标移动的距离，更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数，在该函数中，移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤，我们就可以实现一个简单的原生JavaScript拖拽div效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值