这篇文章主要介绍了javascript实现的多种鼠标拖放效果,涉及javascript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下，具体如下：
这是一款javascript鼠标拖放效果代码，通过本示例了解触发对象，设置范围限制，指定容器大小水平及垂直锁定，还包括获取和释放焦点等。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-mouse-move-fix-style-codes/
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>拖放效果</title></head><body><script> 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("p")).style){ width = height = "100%"; backgroundcolor = "#fff"; filter = "alpha(opacity: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; //记录margin this._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来相对定位，并在获取offset之前设置 !this._mxcontainer || currentstyle(this._mxcontainer).position == "relative" || (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); } //设置位置，并修正margin if(!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(); }};</script><style> #idcontainer{ border:10px solid #990000; width:600px; height:300px;}#iddrag{ border:5px solid #c4e3fd; background:#c4e3fd; width:50px; height:50px; top:50px; left:50px;}#idhandle{cursor:move; height:25px; background:#0000ff; overflow:hidden;}</style><p id="idcontainer"><p id="iddrag"><p id="idhandle"></p></p></p><input id="idreset" type="button" value="复位" /><input id="idlock" type="button" value="锁定" /><input id="idlockx" type="button" value="锁定水平" /><input id="idlocky" type="button" value="锁定垂直" /><input id="idlimit" type="button" value="范围锁定" /><input id="idlimitoff" type="button" value="取消范围锁定" /><br />拖放状态：<span id="idshow">未开始</span><script> 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 = "结束拖放"; }});$("idreset").onclick = function(){ drag.limit = true; drag.mxleft = drag.mxtop = 0; drag.mxright = drag.mxbottom = 9999; drag.lockx = drag.locky = drag.lock = false;}$("idlock").onclick = function(){ drag.lock = true; }$("idlockx").onclick = function(){ drag.lockx = true; }$("idlocky").onclick = function(){ drag.locky = true; }$("idlimit").onclick = function(){ drag.mxright = drag.mxbottom = 200;drag.limit = true; }$("idlimitoff").onclick = function(){ drag.limit = false; }</script></body></html>
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！