JQ实现拖拽（三剑客）

我会带着你远行 2022-03-20 06:10 216阅读 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 条评论，216人围观）

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

相关阅读

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

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

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

相关拖拽

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

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

相关拷贝继承实现拖拽

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

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

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 194 阅读

相关 RecycleView实现拖拽效果

以下是RecyclerView结合ItemTouchHelper实现的列表和网格布局的拖拽效果。效果图如下：（gif图有点顿卡，其实运行是很流畅的） ![这里写图片描述]

梦里梦外;/ 2022年06月07日 03:59/ 0 赞/ 397 阅读

相关 python 实现鼠标拖拽

详细工具见之前写的实现淘宝搜索。 from selenium import webdriver from selenium.webdriver import

一时失言乱红尘/ 2022年05月20日 05:51/ 0 赞/ 230 阅读

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

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

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

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

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

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

相关 Qt 实现文件拖拽

直接上代码 include<QDragEnterEvent> include<QMimeData> include<QDropEvent>

我会带着你远行/ 2022年03月15日 01:10/ 0 赞/ 517 阅读

相关 jQuery实现面板拖拽

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

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