文档章节

jQuery简单制作可拖拽div

imyfd
 imyfd
发布于 2016/11/30 17:19
字数 377
阅读 15
收藏 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
使用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图片画廊插件推荐

jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片。当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视。下面为你介绍了10个最有美感,创新性和创造性的j...

迷路的阿修罗
2010/12/30
0
0
通用仪表盘Dashboard的简单实践

前言 在这个大数据的时代里,数据为王,系统能实时展示各种数据显得尤为重要,所以仪表盘便成为每个系统的标配。 背景 我们都知道大部分前端框架都提供了各种丰富的仪表盘,但有几点不能满足...

邵磊
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
4
2
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
1
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
1
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
1
0
麒麟AI首席科学家现世

8月31日,华为发布了新一代顶级人工智能手机芯片麒麟980,成为全球首款7nm工艺手机芯片,AI方面也实现飞跃,支持人脸识别、物体识别、物体检测、图像分割、智能翻译等。 虽然如今人人都在热议...

问题终结者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部