文档章节

jQuery简单制作可拖拽div

imyfd
 imyfd
发布于 2016/11/30 17:19
字数 377
阅读 16
收藏 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
深圳
私信 提问
JQuery插件开发教程 | WhyJQuery

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

柒月-小妖精
2013/11/14
0
1
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
0
1
分享10个使用简单的jQuery的拖放插件(drag and drop plugin)

日期:2012-4-20 来源:GBin1.com 在这篇文章中,我们将给大家介绍10个使用简单的拖放插件,能够方便快捷的帮助你添加拖放功能到你的网站。谢谢! Drag n Drop Scattered Gallery 支持不同外...

gbin1
2012/04/24
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
今天
3
0
聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
今天
3
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
5
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
3
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部