文档章节

jQuery简单制作可拖拽div

imyfd
 imyfd
发布于 2016/11/30 17:19
字数 377
阅读 18
收藏 0

要知道如何制作拖拽div,要先初步构思流程。

大概流程如此:

1.先写出一个div

.move{
            width:100px;
            height:100px;
            position:absolute;
            top:200px;
            left:200px;
}

注意:div必须是绝对定位,否则无法拖拽移动。

首先,我们想要拖拽,必须要先在div中按下鼠标才能拖拽,按下后获取div在页面中的位置,在按下鼠标后,鼠标是在div中的不确定位置点击的,所以我们要获得鼠标点击的坐标,将鼠标的page坐标与div的 offset相减,得到鼠标到div边界的距离,在设置值为鼠标坐标与到div的距离相减,得到div坐标,设置监听事件,让鼠标移动时坐标的加减与div同步,即可做出拖拽效果,当鼠标放开时,拖拽结束,消除绑定函数。

还是从代码中研究吧。

<script>
			$('.move').mousedown(function(e){

				var offset = $(this).offset();//获取DIV在页面的位置 
				var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
				var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
				
				$(document).bind('mousemove',function(ev){

					var _x=ev.pageX-x;//鼠标与div同步
					var _y=ev.pageY-y; 

					$('.move').css('left',_x+'px').css('top',_y+'px');
				})
			});
			$(document).mouseup(function() 
			{ 
			$(this).unbind("mousemove"); //取消绑定
			}) 
		</script>

如果不想让div拖拽超过限定范围,添加一个返回函数就好了。

                    var _x=ev.pageX-x;//鼠标与div同步
					var _y=ev.pageY-y; 
					if(_x>1200){
						return false;
					};

© 著作权归作者所有

共有 人打赏支持
imyfd
粉丝 0
博文 3
码字总数 1502
作品 0
深圳
私信 提问
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
JQuery插件开发教程 | WhyJQuery

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇...

柒月-小妖精
2013/11/14
0
1
jQuery插件开发 - 其实很简单

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇...

晨曦之光
2012/03/09
186
0
jquery mobile 怎么实现图片或者DIV拖拽效果

jquery mobile 怎么实现图片或者DIV拖拽效果 需要什么插件吗? 或者jQuery 能实现在手机和平板上的拖拽吗/?

Mr_Zhou
2013/05/19
2.2K
2
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
560
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Greenwich 新特性和F升级分享

2019.01.23 期待已久的Spring Cloud Greenwich 发布了release版本,作为我们团队也第一时间把RC版本替换为release,以下为总结,希望对你使用Spring Cloud Greenwich 有所帮助 Greenwich 只支...

冷冷gg
38分钟前
40
1
精读《论语》读后感作文3600字

精读《论语》读后感作文3600字: 学而篇第一:子曰:“学而时习之,不亦说乎?有朋友自远方来,不亦悦乎?人不知,而不愠,不亦君子乎? 朱熹解:即学而又时时习之,则学者熟,而衷心喜悦,其...

原创小博客
55分钟前
0
0
CPU内存结构

开局一张图 由于CPU频率太快了,为解决直接读取内存的数据上的延迟,在CPU和内存之间,存在3级缓存。 CPU在解决和缓存不一致上采用两种方式: 缓存一致性协议 总线锁机制 CPU CPU的一个时钟周...

春哥大魔王的博客
58分钟前
1
0
记一次centos 7内核升级事故

情景 公司做等保3测评,在进行系统漏洞检测时发现内核存在漏洞,需要进行升级。 名称 版本 升级前内核 CentOS Linux (3.10.0-327.el7.x86_64) 7 (Core) 升级后内核 CentOS Linux (3.10.0-957...

阿dai
今天
9
0
PowerDesigner操作

1.去掉生成DDL里的注释 Database -> Edit Current DBMS -> Script -> Syntax -> BlockComment,去掉BlockComment里面的value内容。...

了凡川
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部