自各儿写的一个简易块元素拖动js工具，散分
日期：2014-05-16 浏览次数：20371 次
自己写的一个简易块元素拖动js工具，散分
/**
* create by : zhouwn
* create date : 2013-07-27
* namespace : dragUtil
* description : html元素拖动功能js工具包，让元素具备拖动和解除拖动功能
* 拖放的核心在于鼠标左键的按下，移动，和松开事件的控制，该js第一版未使用jq
* version : v0.901
*/
var dragUtil = {};//拖放工具命名空间
/**
* 让目标元素具备拖放功能
* @param {Object} obj 目标元素
*/
dragUtil.enableDrag = function(obj){
obj.enableDrag = false;//需扩展一个用于控制是否可以拖放的flag属性
obj.style.position = "absolute";//目标元素样式中的position属性需设置为：absolute
obj.onmousedown = dragUtil.initDrag;//鼠标按下事件绑定
obj.onmousemove = dragUtil.doDrag;//鼠标移动事件绑定
obj.onmouseup = dragUtil.endDrag;//鼠标松开事件绑定
}
/**
* 移除目标元素的拖放功能
* @param {Object} obj 目标元素
*/
dragUtil.disableDrag = function(obj){
//移除控制属性
obj.enableDrag = undefined;
obj.srcCoord = undefined;
//移除事件绑定
obj.onmousedown = undefined;
obj.onmousemove = undefined;
obj.onmouseup = undefined;
}
/**
* 初始化拖放
* @param {Object} e 事件对象
*/
dragUtil.initDrag = function(e){
var event = e || window.event;//FF获取事件对象 ||IE获取事件对象
var element = event.target || event.srcElement;//FF获取事件源 ||IE获取事件源
//鼠标左右键e.button(0标识左键，1标识中键，2标识右键，FF IE均如此)
if(event.button == 0){
element.enableDrag = true;//开启可移动flag
element.srcCoord = {x : event.clientX , y : event.clientY};//记录鼠标当前坐标
}
}
/**
* 结束拖放
* @param {Object} e 事件对象
*/
dragUtil.endDrag = function(e){
var event = e || window.event;//FF IE
var element = event.target || event.srcElement;//FF IE
if(event.button == 0){
element.enableDrag = false;//拖放flag置为false
}
}
/**
* 执行拖放
* @param {Object} e 事件对象
*/
dragUtil.doDrag = function(e){
var event = e || window.event;//FF IE
var element = event.target || event.srcElement;//FF IE
//检测是否可以拖动
if(element.enableDrag){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
