文档章节

javascript拖拽盒子移动的实现

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 232
阅读 61
收藏 0

原理比较简单,可以参照之前的文章javascript淘宝主图放大镜功能帮助理解。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				position: absolute;
				left: 50px;
				top: 50px;
				width: 200px;
				height: 200px;
				background: red;
			}
			#box2{
				position: relative;
				box-sizing: border-box;
				width: 800px;
				height: 400px;
				margin: 50px auto;
				border: 1px solid gray;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function (){
				var box = document.getElementById('box');
				var box2 = document.getElementById('box2');
				var boxX = 0;
				var boxY = 0;
				box.onmousedown = function (ev){
					var ev = ev||event;
					boxX = ev.clientX - box.offsetLeft;
					boxY = ev.clientY - box.offsetTop;
					
					var n = 10;//吸附参数
					
					if(box.setCapture){
						document.onmousemove = mousemove;
						document.onmouseup = mouseup;
						box.setCapture();//IE中将其他地方的事件集中到box
						
					}
					else{
						document.onmousemove = mousemove;
						document.onmouseup = mouseup;
					}
					
					
					function mousemove (ev){
						var ev = ev||event;
						var l = ev.clientX - boxX;
						var t = ev.clientY - boxY;
						//边缘吸附处理
						if(l<n){
							l = 0;
						}
						else if(l>box2.offsetWidth-box.offsetWidth-n){
							l = box2.offsetWidth-box.offsetWidth-2;
						}
						if(t<n){
							t = 0;
						}
						else if(t>box2.offsetHeight-box.offsetHeight-n){
							t = box2.offsetHeight-box.offsetHeight-2;
						}
						box.style.left = l+"px";
						box.style.top = t+"px";
						
						
					}
					function mouseup (){
						this.onmousemove = null;
						this.onmouseup = null;
						if(this.releaseCapture)
						{
							this.releaseCapture();
						}
					}
					return false;
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box2">
			<div id="box"></div>
		</div>
	</body>
</html>


© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
使用原生js以两种方式制作一个精美的轮播图(下)

展示界面 & github源码 (这里可以实现PC端模拟移动端左右滑动图片切换的效果) github源码(包含两种方式实现轮播图的源码) 项目预览 前言 如何用原生js实现一个简单的轮播图呢?前面我已经用...

子银_
09/02
0
0
基于javascript的拖拽类封装^o^

效果图如下: github地址如下:github地址 使用方法 引入js和对应的css 之后,实例化 具体实现(封装细节) 功能细节整理: 旋转 缩放 平移 技术难点: 旋转时要注意盒子每一个点的位置发生了...

我是大哥的女朋友
04/19
0
0
彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/83622628 一、基于鼠标事件的拖拽 原理——onmousedown、onmousemove、onmouseup o...

caomage
2018/11/01
0
0
cxwithyxy/Axure_Js_Inject

AxureJsInject v1.0 可以在产品原型(RP)中加入你想要的js代码,这些js代码会用浏览器浏览产品原型的时候执行 支持 目前支持 Axure rp 8.1.0.3372 其他版本有待测试 开始 在元件库中导入 Ax...

陈轩大魔王
2018/04/15
0
0
jq的拖拽功能不兼容吗?

如图,我需要这样才能让js生效。但是我的js不是ajax,只是单纯的一个拖拽功能。 向左转| 向右转 我代码是这样的, 能详细点告诉我应该怎么做吗?或者本身代码有问题? jquery.easyui的版本是...

空晓
2013/08/19
349
0

没有更多内容

加载失败,请刷新页面

加载更多

华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
8分钟前
0
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
11分钟前
1
0
C++容器底层数据结构

内置数组: int arr[10][10];memset(arr,0,10*10*sizeof(int)); //初始化int tmp[10][10];memcpy(arr, tmp, 10 * 10 * sizeof(int));//拷贝 void *memcpy(void *destin, void *source,......

SibylY
11分钟前
1
0
Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
40分钟前
6
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
42分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部