javascript实现最简单的拖拽效果

// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
// zxx.drag v1.0 2010-03-23 元素的拖拽实现

var params = {
	left: 0,
	top: 0,
	currentX: 0,
	currentY: 0,
	flag: false
};
//获取相关CSS属性
var getCss = function(o,key){
	return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};

//拖拽的实现
var startDrag = function(bar, target, callback){
	if(getCss(target, "left") !== "auto"){
		params.left = getCss(target, "left");
	}
	if(getCss(target, "top") !== "auto"){
		params.top = getCss(target, "top");
	}
	//o是移动对象
	bar.onmousedown = function(event){
		params.flag = true;
		if(!event){
			event = window.event;
			//防止IE文字选中
			bar.onselectstart = function(){
				return false;
			}
		}
		var e = event;
		params.currentX = e.clientX;
		params.currentY = e.clientY;
	};
	document.onmouseup = function(){
		params.flag = false;
		if(getCss(target, "left") !== "auto"){
			params.left = getCss(target, "left");
		}
		if(getCss(target, "top") !== "auto"){
			params.top = getCss(target, "top");
		}
	};
	document.onmousemove = function(event){
		var e = event ? event: window.event;
		if(params.flag){
			var nowX = e.clientX, nowY = e.clientY;
			var disX = nowX - params.currentX, disY = nowY - params.currentY;
			target.style.left = parseInt(params.left) + disX + "px";
			target.style.top = parseInt(params.top) + disY + "px";
		}

		if (typeof callback == "function") {
			callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
		}
	}
};

  

时间: 2024-11-07 16:31:35

javascript实现最简单的拖拽效果的相关文章

jquery监听事件on写法以及简单的拖拽效果

引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: $("#haorooms").css("width","100px"); 假如多个属性呢?我们写法如下: $(".demo").css({"height":"100px","ba

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见.实现起来也不难.记录一下今天实现的简单效果. 拖拽演示 快速拖动时,会出现问题,以后修改. 说白了,就是3个点击事件. 1. 按下鼠标左键, 触发点击事件,此时记录下可以得到鼠标相对于拖动控件的位置(当前鼠标位置-控件位置): 2. 拖动鼠标,触发移动事件,可以计算出鼠标移动的距离(当前鼠标位置-之前算出的相对位置),也就是拖拽控件所移动的距离: 3. 鼠标抬起,结束拖动. 在JQ中,event.pageX    event.pageY可以获取鼠标的位置,相对于文档左上角

4, 简单的拖拽效果

class Main extends egret.DisplayObjectContainer { /** * 入口文件, 最先执行的构造方法 * 这会实例化一个和手机屏幕一样大的舞台 */ public constructor() { super(); this.once( egret.Event.ADDED_TO_STAGE, this.begin, this ); } /** * 入口文件加载成功后执行的方法 * 也是逻辑的开始, 通过触摸移动显示对象 */ private begin(e

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

以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. 实现该效果的HTML页面代码例如以下所看到的: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #xixi { width:200px; h

js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果: 1.首先我们先设置一个div,然后简单设置一下样式: div{ width:50px; height: 50px; background-color: red; position: absolute; } 2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下.拖动鼠标元素跟着移动.以及鼠标左键抬起停止拖拽元素停止移动 var div = document.querySelector("div");                 

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

简单的鼠标拖拽效果(原生js实现)

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果,当时看到后在心里默默思考了下,结果发现好像我也写不出来啊.本着遇到一个解决一个的思想,就亲自敲了一个,看到张鑫旭大神写的代码,真的很厉害,多多学习了,(感觉随便搜一个关于前端方面的问题都能看到他的网站,真是太佩服了,写了那么多文章,十分感谢.)好了,接下来就进入正题了.想实现一个效果首先得明白其中的逻辑,知道了实现逻辑后,就可以码代码了.首先我实现的效果是: 鼠标按下后,才可以执行后续效果 鼠标已经按下,然后鼠标移动,需要拖拽的元素

javascript如何指定元素的拖拽范围

javascript如何指定元素的拖拽范围:有时候拖拽效果需要限定在某一个指定的元素之内,也就是说只能够在指定的元素内进行拖拽,下面就通过一个代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&q

Createjs学习心得之使用EaselJs实现拖拽效果

寒假时跟着老师在做一个createjs+angularjs的html5应用app,因为在这之前完全没了解过createjs这个框架,所以在查找资料时发现,国外官网(http://www.createjs.com)API文档虽是详细,但对于一些英语不太好的童鞋(其实我也是一枚英语渣渣)就比较难理解了.而国内中文社区做的并不好,用户不多,资料翻译准确度不够.所以在这里,我就把我学习Createjs的一些心得体会向大家分享下: 一.什么是CreateJS? createjs是一个轻量级的javascr