JS之用jquery编写将页面中div拖动

朴灿烈づ我的快乐病毒、 2021-09-16 00:20 261阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	*{
    		margin:0;
    		padding:0;
    	}
    		div{
    			width: 100px;
    			height: 100px;
    			background: red;
    			position: absolute;
    			left:100px;
    			top:100px;
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    <script src="../../jquery.js"></script>
    <script>
    	//获取位置和偏移量
    	//$("div").offset();
    	//$("div").offset({"top":"20px","left":"20px"});
    	//获取鼠标点击的位置
    	$("div").mousedown(fn);
    
    	function fn(e){
    		var e = e||window.event;
    		//获得鼠标点击的位置
    		var x = e.pageX;
    		var y = e.pageY;
    		// console.log(x,y);
    		var l = $("div").offset().left;
    		var t = $("div").offset().top;
    		// console.log(l,t)
    		//获得按下时候距离左上角的位置
    		 x1 = x-l;
    		 y1 = y-t;
    		// console.log(x1,y1);
    		$(document).mousemove(fn1);
    	}
    
    	function fn1(e){
    		var e = e||window.event;
    			//获得鼠标点击的位置
    			var x = e.pageX;
    			var y = e.pageY;
    			// console.log(x,y);
    			// 此刻鼠标点击的位置减去点击位置距离左上角的位置,就是拖拽之后为div设置的top,left值
    			var l1 = x-x1+"px";
    			var t1 = y-y1+"px";
    			// console.log(l1,t1);
    			//为div设置top值和left值
    			$("div").css("top",t1);
    			$("div").css("left",l1);
    	}
    	//删除指定事件
    	$(document).mouseup(function(){
    		$(document).off("mousemove",fn1);
    	});
    
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 js时实现鼠标拖动div

实现js拖动div 实现步骤： 1. 鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移； 2. 鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置

清疚/ 2023年07月24日 05:37/ 0 赞/ 7 阅读

相关 js设置div在body中可以任意拖动

js代码： function dragFunc() { var Drag = document.getElementById(divId);

以你之姓@/ 2022年12月19日 15:24/ 0 赞/ 158 阅读

相关 JS_让div在body中可以任意拖动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

绝地灬酷狼/ 2022年12月15日 14:23/ 0 赞/ 129 阅读

相关 JS+DIV 实现拖动效果

效果图思路代码优化封装以及解决拖动问题事件捕获效果图 ![这里写图片描述][201607281930450

待我称王封你为后i/ 2022年09月24日 10:19/ 0 赞/ 224 阅读

相关 JS_js实现拖动DIV交换位置

![在这里插入图片描述][24d29df1f64bd6d02bfb602b30daa026.gif_pic_center] <!DOCTYPE html> <

怼烎@/ 2022年09月11日 05:28/ 0 赞/ 193 阅读

相关 Jquery 实现div随意拖动

目的：使div可以拖动。注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。需要用的到的插件下载：[https://jqueryui.com/

超、凢脫俗/ 2022年05月19日 06:28/ 0 赞/ 409 阅读

相关 jquery实现两个div中的元素相互拖动

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中： ![watermark_type_ZmFuZ3poZW5naGV

小鱼儿/ 2022年02月03日 15:13/ 0 赞/ 259 阅读

相关 div在手机页面上随意拖动

效果 ![在这里插入图片描述][20190605150556387.gif] 代码代码很简单，里面也有注释。 <!doctype html>

一时失言乱红尘/ 2022年01月22日 06:55/ 0 赞/ 264 阅读

相关 JS之用jquery编写将页面中div拖动

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

朴灿烈づ我的快乐病毒、/ 2021年09月16日 00:20/ 0 赞/ 262 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 473 阅读