JavaScript 拖放效果

一个可拖放的ＪＳ效果;

 var isIE = (document.all) ? true : false;var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}}var Extend = function(destination, source) {for (var property in source) {destination[property] = source[property];}}var Bind = function(object, fun) {return function() {return fun.apply(object, arguments);}}var BindAsEventListener = function(object, fun) {return function(event) {return fun.call(object, (event || window.event));}}var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}function addEventHandler(oTarget, sEventType, fnHandler) {if (oTarget.addEventListener) {oTarget.addEventListener(sEventType, fnHandler, false);} else if (oTarget.attachEvent) {oTarget.attachEvent("on" + sEventType, fnHandler);} else {oTarget["on" + sEventType] = fnHandler;}};function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; }};//拖放程序var Drag = Class.create();Drag.prototype = { //拖放对象 initialize: function(drag, options) {this.Drag = $(drag);//拖放对象this._x = this._y = 0;//记录鼠标相对拖放对象的位置this._marginLeft = this._marginTop = 0;//记录margin//事件对象(用于绑定移除事件)this._fM = BindAsEventListener(this, this.Move);this._fS = Bind(this, this.Stop);this.SetOptions(options);this.Limit = !!this.options.Limit;this.mxLeft = parseInt(this.options.mxLeft);this.mxRight = parseInt(this.options.mxRight);this.mxTop = parseInt(this.options.mxTop);this.mxBottom = parseInt(this.options.mxBottom);this.LockX = !!this.options.LockX;this.LockY = !!this.options.LockY;this.Lock = !!this.options.Lock;this.onStart = this.options.onStart;this.onMove = this.options.onMove;this.onStop = this.options.onStop;this._Handle = $(this.options.Handle) || this.Drag;this._mxContainer = $(this.options.mxContainer) || null;this.Drag.style.position = "absolute";//透明if(isIE && !!this.options.Transparent){//填充拖放对象with(this._Handle.appendChild(document.createElement("div")).style){width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;}}//修正范围this.Repair();addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start)); }, //设置默认属性 SetOptions: function(options) {this.options = {//默认值Handle:"",//设置触发对象（不设置则使用拖放对象）Limit:false,//是否设置范围限制(为true时下面参数有用,可以是负数)mxLeft:0,//左边限制mxRight:9999,//右边限制mxTop:0,//上边限制mxBottom:9999,//下边限制mxContainer:"",//指定限制在容器内LockX:false,//是否锁定水平方向拖放LockY:false,//是否锁定垂直方向拖放Lock:false,//是否锁定Transparent:false,//是否透明onStart:function(){},//开始移动时执行onMove:function(){},//移动时执行onStop:function(){}//结束移动时执行};Extend(this.options, options || {}); }, //准备拖动 Start: function(oEvent) {if(this.Lock){ return; }this.Repair();//记录鼠标相对拖放对象的位置this._x = oEvent.clientX - this.Drag.offsetLeft;this._y = oEvent.clientY - this.Drag.offsetTop;//记录marginthis._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;//mousemove时移动 mouseup时停止addEventHandler(document, "mousemove", this._fM);addEventHandler(document, "mouseup", this._fS);if(isIE){//焦点丢失addEventHandler(this._Handle, "losecapture", this._fS);//设置鼠标捕获this._Handle.setCapture();}else{//焦点丢失addEventHandler(window, "blur", this._fS);//阻止默认动作oEvent.preventDefault();};//附加程序this.onStart(); }, //修正范围 Repair: function() {if(this.Limit){//修正错误范围参数this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);//如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");} }, //拖动 Move: function(oEvent) {//判断是否锁定if(this.Lock){ this.Stop(); return; };//清除选择window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();//设置移动参数var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;//设置范围限制if(this.Limit){//设置范围参数var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;//如果设置了容器，再修正范围参数if(!!this._mxContainer){mxLeft = Math.max(mxLeft, 0);mxTop = Math.max(mxTop, 0);mxRight = Math.min(mxRight, this._mxContainer.clientWidth);mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);};//修正移动参数iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);}//设置位置，并修正marginif(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }//附加程序this.onMove(); }, //停止拖动 Stop: function() {//移除事件removeEventHandler(document, "mousemove", this._fM);removeEventHandler(document, "mouseup", this._fS);if(isIE){removeEventHandler(this._Handle, "losecapture", this._fS);this._Handle.releaseCapture();}else{removeEventHandler(window, "blur", this._fS);};//附加程序this.onStop(); }};

实例化时只需要一个参数，就是拖放对象：

var drag = new Drag("idDrag")

有以下这些可选参数和属性：
属性:默认值//说明
Handle:"",//设置触发对象（不设置则使用拖放对象）
Limit:false,//是否设置范围限制(为true时下面参数有用,可以是负数)
mxLeft:0,//左边限制
mxRight:9999,//右边限制
mxTop:0,//上边限制
mxBottom:9999,//下边限制
mxContainer:"",//指定限制在容器内
LockX:false,//是否锁定水平方向拖放
LockY:false,//是否锁定垂直方向拖放
Lock:false,//是否锁定
Transparent: false,//是否透明
onStart:function(){},//开始移动时执行
onMove:function(){},//移动时执行
onStop:function(){}//结束移动时执行

还有属性Drag是拖放对象，Transparent、Handle和mxContainer初始化后就不能再设置。

例: var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true,
 onStart: function(){ $("idShow").innerHTML = "开始拖放"; },
 onMove: function(){ $("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },
 onStop: function(){ $("idShow").innerHTML = "结束拖放"; }