JQ实现拖拽（三剑客）

我会带着你远行 2022-03-20 06:10 264阅读 0赞

之前发布了一个实现拖拽的JS代码，现在应个别同学的要求，发一份JQ版本的代码。  
实现的步骤同样还是三剑客  
废话不多说，直接上代码：

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			div{width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 100px}
    		</style>
    		<script src = '../jquery-1.10.1.min.js'></script>
    		<script>
    			$(function(){
    				var offsetX = 0;
    				var offsetY = 0;
    				//第一步：鼠标点下时获取鼠标落下的位置
    				$("div").mousedown(function(ev){
    					offsetX = ev.clientX - $(this).offset().left;
    					offsetY = ev.clientY - $(this).offset().top;
    
    					var _this = this;
    					//第二步：在document下div跟随鼠标移动
    					$(document).mousemove(function(ev){
    						$(_this).css({
    							left: ev.clientX - offsetX,
    							top: ev.clientY - offsetY
    						})
    					})
    				})
    				//第三步：在document下 鼠标抬起，取消跟随事件
    				$(document).mouseup(function(){
    					$(document).off("mousemove");
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 AngularJS实现拖拽

<!doctype html> <html ng-app="drag"> <head> <script src="http://co

淡淡的烟草味﹌/ 2023年06月15日 09:43/ 0 赞/ 26 阅读

相关 react怎么实现拖拽

拖拽其实用h5的设置元素draggable就可以了，看代码就可以了拖拽容器 import React from 'react'; // 拖拽

浅浅的花香味﹌/ 2022年11月04日 00:53/ 0 赞/ 178 阅读

相关拖拽演示，原生封装+JQ （详解）

http://www.w3cfuns.com/blog-5450759-5401651.html 原始拖拽，三点注意： 1：onmouse

缺乏、安全感/ 2022年08月13日 16:51/ 0 赞/ 163 阅读

相关拖拽

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

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 338 阅读

相关拷贝继承实现拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>继承的

ゞ浴缸里的玫瑰/ 2022年06月14日 05:52/ 0 赞/ 362 阅读

相关 js实现拖拽事件

HTML <body> <div></div> </body> CSS div{ position: absolute

「爱情、让人受尽委屈。」/ 2022年05月29日 08:24/ 0 赞/ 318 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 332 阅读

相关 JQ实现拖拽（三剑客）

之前发布了一个实现拖拽的JS代码，现在应个别同学的要求，发一份JQ版本的代码。实现的步骤同样还是三剑客废话不多说，直接上代码： <!DOCTYPE htm

我会带着你远行/ 2022年03月20日 06:10/ 0 赞/ 265 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 497 阅读

相关 jQuery实现面板拖拽

一.实现功能 1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。 2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。 3.接

矫情吗；*/ 2022年01月31日 07:11/ 0 赞/ 333 阅读