javascript封装drag()拖拽函数

标签: javascript | 发表时间:2013-03-08 21:47 | 作者:adou
出处:http://varhi.com

拖拽效果虽然项目中很少使用,但不可否认其是一个很经典的效果(google产品使用的挺多的),下面整理了拖拽效果的代码框架。
里面解决兼容性的代码需要重点理解下:
1、通过setCapture()与releaseCapture()解决IE浏览器下拖拽图片的bug,即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点;
2、通过return false取消浏览器的默认行为,firefox浏览器下空对象元素无法拖动[高版本浏览器已修复];

function drag(obj){
	obj.onmousedown = function(ev){
		var ev = ev || event;
		var disX = ev.clientX - obj.offsetLeft;
		var disY = ev.clientY - obj.offsetTop;
                //修复ie浏览器下图片不跟随鼠标移动
		if(obj.setCapture){
			obj.setCapture();	
		}
		document.onmousemove = function(ev){
			var ev = ev || event;
			obj.style.left = ev.clientX - disX;
			obj.style.top = ev.clientY - disY;
		}
		document.onmouseup = function(){
			obj.onmousedown = obj.onmousemove = null;
                        //通过释放releaseCapture()修复IE浏览器下任何区域对对象元素事件的影响[桌面事件也会对其产生影响]
			if(obj.releaseCapture){
				obj.releaseCapture();	
			}
		}
                //取消浏览器的默认行为
		return false;
	}	
}

代码已经ok了,直接调用drag(obj)函数就可以了,obj为拖动元素…

相关 [javascript 封装 drag] 推荐:

javascript封装drag()拖拽函数

- - 收集分享互联网资源!
拖拽效果虽然项目中很少使用,但不可否认其是一个很经典的效果(google产品使用的挺多的),下面整理了拖拽效果的代码框架. 里面解决兼容性的代码需要重点理解下:. 1、通过setCapture()与releaseCapture()解决IE浏览器下拖拽图片的bug,即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点;.

(转)JavaScript封装

- - CSDN博客Web前端推荐文章
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象. 但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢.

javascript封装addClass()方法

- - 收集分享互联网资源!
//获取obj标签对象的class. //如果oClass为空则直接赋newClass. //1、判断当前标签里是否含有newClass,如果含有newClass则return跳出不赋值,避免反复赋同样的newClass. //2、如果不含有newClass,则在原来oClass的基础上添加新的newClass.

XMLUtils 封装通用的javascript解析XML文件

- - JavaScript - Web前端 - ITeye博客
* 加载xml文件,参数:. xmlPath:加载的xml文件路径;. * @return {Object} true 正常加载; false 加载失败. * 判断节点的是否有子节点. * @return {Object} 有子节点则返回true,否则返回false. * @return {Object} 有属性则返回true,否则返回false.

基于OpenLayers的地图封装Javascript类定义

- - CSDN博客推荐文章
基于OpenLayers的地图封装Javascript类定义. //web地图封装类 //MapCwgisClass类的定义 //vp:hsg,myk //create date:2013-07-26 //类 原型定义 var Person = function () {. } } //类 原型定义 var MapCwgisClass=function() {.

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

- - 彬Go
  早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床. 哦,Sorry, 是 拖拽上传. 到现在,这个功能已经上线了整整半年,这篇文章也足足拖延了半年才分享给大家,实在是对不住了,呵呵,今后彬Go一定要勤奋发Blog. 您还可以参考以下HTML5相关文章:.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex's Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.