关闭

[JavaScript学习]用面向对象方法实现拖拽效果

标签: javascript面向对象拖拽
895人阅读 评论(0) 收藏 举报
分类:

这两天又进一步学习了下JavaScript的面向对象方法,也看了简单的拖拽案例,顺便就尝试自己写写简单的拖拽效果作为练习


目标:实现子DIV在父DIV内的拖拽效果,并且不会突破父DIV边缘,在接近父DIV边缘时,自动吸附到边缘;

想法:

  1. 鼠标在子DIV区域内按下,子DIV获取onclick事件,计算鼠标位置和子DIV左边缘和上边缘的距离;
  2. 鼠标移动,生成一个虚线框的DIV,大小和子DIV一直,左边缘和上边缘与鼠标位置距离和之前测得的鼠标位置与子DIV距离保持一致,跟随鼠标移动,实现拖拽效果;
  3. 若鼠标移动范围超过父DIV边缘,则让虚线框DIV边缘位置与父边框边缘位置保持一致,从而防止突破父DIV边缘;
  4. 当鼠标在父边框内接近父边框边缘一定距离时,将父边框边缘位置赋给虚线框DIV边缘位置,从而实现吸附效果;
  5. 鼠标按键松开,将虚线框DIV的位置信息赋给子DIV,同时消除虚线框DIV。

实现:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>
</html>

CSS:

#div2{
	width: 80px;
	height: 80px;
	background: red;
	position: absolute;
}
#div1{
	width: 400px;
	height: 400px;
	background:gray;
	position: relative;
}
.box {
	border: dashed 1px black;
	position: relative;
}

JavaScript:

window.onload = function(){
	new Drag("div1", "div2", "20");
}
//拖拽对象构建函数
function Drag(fatherId, childId, touchDis){
	var _this = this;
	this.touchDis = touchDis;
	this.disX = 0;
	this.disY = 0;
	this.oDiv1 = document.getElementById(fatherId);
	this.oDiv2 = document.getElementById(childId);
	//绑定鼠标点下事件处理函数
	this.oDiv2.onmousedown = function(ev){
		_this.mouseDown(ev);
	}
}
//鼠标点下事件处理函数
Drag.prototype.mouseDown = function (ev){
	var _this = this;
	var oEvent = ev || event;
	//保存鼠标位置和子DIV的左边缘与上边缘距离
	this.disX = oEvent.clientX - this.oDiv2.offsetLeft + document.documentElement.scrollLeft;
	this.disY = oEvent.clientY - this.oDiv2.offsetTop + document.documentElement.scrollTop;
	//创建虚线框DIV(oBox),并添加到父DIV的子节点上
	this.oBox = document.createElement('div');
	this.oBox.className = 'box';
	this.oBox.style.width = this.oDiv2.offsetWidth - 2 + 'px';
	this.oBox.style.height = this.oDiv2.offsetHeight - 2 + 'px';
	this.oBox.style.left = this.oDiv2.offsetLeft + 'px';
	this.oBox.style.top = this.oDiv2.offsetTop + 'px';
	this.oDiv1.appendChild(this.oBox);
	//简单的鼠标事件捕获兼容处理,并绑定相应的事件处理函数
	if(this.oDiv2.setCapture){
		this.oDiv2.onmousemove = function(ev){
			_this.mouseMove(ev);
		}
		this.oDiv2.onmouseup = function(){
			_this.mouseUp();
		}
		this.oDiv2.setCapture();
	}else{
		document.onmousemove = function(ev){
			_this.mouseMove(ev);
		}
		document.onmouseup = function(){
			_this.mouseUp();
		}
	}
	//禁用浏览器默认操作
	return false;
}
//鼠标移动事件处理函数
Drag.prototype.mouseMove = function (ev){
	var oEvent = ev || event;
	var left = oEvent.clientX - this.disX + document.documentElement.scrollLeft;
	var top = oEvent.clientY - this.disY + document.documentElement.scrollTop;
	//检测鼠标是否在父DIV内,防止子DIV突破父DIV边界,同时通过判断鼠标和父DIV边缘距离实现边缘吸附效果
	if(left < this.touchDis){
		left = 0;
	}else if(left > this.oDiv1.offsetWidth - this.oDiv2.offsetWidth - this.touchDis){
		left =  this.oDiv1.offsetWidth - this.oDiv2.offsetWidth;
	}

	if(top < this.touchDis){
		top = 0;
	}else if(top > this.oDiv1.offsetHeight - this.oDiv2.offsetHeight - this.touchDis){
		top = this.oDiv1.offsetHeight - this.oDiv2.offsetHeight;
	};
	this.oBox.style.left = left + 'px';
	this.oBox.style.top = top + 'px';
};
//鼠标松开事件处理函数
Drag.prototype.mouseUp = function(){
	//解除鼠标点下和移动事件处理函数绑定
	this.onmousemove = null;
	this.onmousup = null;
	//奖虚线框DIV位置信息赋给子DIV
	this.oDiv2.style.left = this.oBox.offsetLeft + 'px';
	this.oDiv2.style.top = this.oBox.offsetTop + 'px';
	//移除虚线框DIV
	this.oDiv1.removeChild(this.oBox);
	if(this.oDiv2.releaseCapture){
		this.oDiv2.releaseCapture();
	}
};
实现效果如下:传送门

写完后发现其实这样用面向对象方法来实现好像很蛋疼,好像没什么实用性,不过权当练习了……


0
0
查看评论

JavaScript 实现简单的拖拽效果

之前一直对js中常用坐标属性不是很熟,特意花了一个下午的时间研究,并写了一个实现元素拖动的函数,在这边分享一下。(如果有不对的地方,还请批评指正~) 先介绍一下实现元素拖动需要的坐标属性。offsetLeft、offsetTop 和 clientX、clientY off...
  • zwkkkk1
  • zwkkkk1
  • 2017-10-02 09:48
  • 460

JavaScript实现网页元素的拖拽效果

JavaScript实现网页元素的拖拽效果
  • jackfrued
  • jackfrued
  • 2014-04-26 00:27
  • 12416

手机端简单js拖拽效果

网上找了好多js实现拖拽效果的demo,但是这是唯一的一个能够实现手机端的拖拽效果,至于android、iphone、华为等手机上的app是否能够正常拖拽,有待测试。先保存下来:<!doctype html> <html> <head> <meta ...
  • qq_39198420
  • qq_39198420
  • 2017-08-17 11:11
  • 484

JavaScript拖拽图片一

本文演示如何将一张图片用鼠标拖拽到某个位置。先看html代码: drag demo <div id="icon1" onmousedown="mouseDown(event)" style="...
  • sheismylife
  • sheismylife
  • 2012-07-09 19:17
  • 6398

简单几步原生javascript实现元素拖拽功能兼容所有浏览器

代码 *{margin: 0;padding: 0;} 按住左键拖动 window.onload = function() { //用于确定是否是拖拽的对象 var drag; //鼠标位于目标元素上...
  • u012906135
  • u012906135
  • 2016-09-30 14:54
  • 1384

原生JavaScript与jQuery(绝对、相对定位)实现拖拽效果

今天给大家谈谈这个拖拽功能的实现 一是想复习一下这个小知识,二是看到网上都是absolute绝对定位实现的,感觉有一定局限性 所以自己写了一下用relative相对定位来实现的拖拽效果原生js绝对定位实现拖拽首先我们来思考一下拖拽功能用到的事件 拖拽无非是鼠标按下点击物体(DOM节点) 鼠标...
  • q1056843325
  • q1056843325
  • 2016-11-03 21:54
  • 3000

js案例 元素的拖拽与吸附(touch+translate)

*{ padding: 0; margin: 0; } .fa{ height: 300px; width: 99%;; border: 1px solid red; margin: 0 auto; overflow: hidden...
  • u011301203
  • u011301203
  • 2016-11-29 14:03
  • 1719

利用JQ实现简单的拖曳效果

提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。 操作设计的节点有:原节点,临时节点,新节点 节点的移动涉及事件e的坐标 操作元素使用JQ...
  • weixin_38788347
  • weixin_38788347
  • 2017-10-18 15:37
  • 215

Android实现拖动效果的两种解法

因为最近项目的需要,需要实现一个拖动效果,看了一下网上刚好有这种拖动效果的demo,代码大概如下: private void initListener(){ screenWidth = getScreenWidth(this);//获取屏幕宽度 screenHeigh...
  • u013772458
  • u013772458
  • 2016-12-19 11:48
  • 576

C# winform 拖拽效果

步骤: 1、 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析。 2、接受拖放控件的AllowDrop属性必须设置成true; 3、必须在DragEnter事件中设置好要接受拖放的效果,默认为无效果。(所以单独写...
  • shuanger_
  • shuanger_
  • 2015-09-17 16:57
  • 640
    个人资料
    • 访问:9793次
    • 积分:197
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论