Jquery拖拽外掛程式

文章原創，轉載請註明出處：http://blog.csdn.net/xxd851116

9月20日就我一個人在家，無聊之極，就寫了個Jquery拖動外掛程式，大家看看吧：

優點：支援元素任意樣式，支援鎖定範圍限制，支援水平鎖定和垂直鎖定，支援IE和FF，解決了mousemove和mouseup事件丟失的問題；
不足：善未解決當移動元素中文字被選中後拖動或拖動圖片導致mousemove、mouseup事件丟失的問題，望高手解決；

 

完整Demo下載

 

源碼：

/**<br /> * jQuery lightbox plugin : simple lightbox implements<br /> * http://blog.csdn.net/xxd851116<br /> *<br /> * @Copyright (c) 2009 XingXiuDong<br /> *<br /> * @Date: 2009-09-20<br /> * @author: XingXiuDong<br /> * @version: 1.0 simple drag and drop implements<br /> * @version: 1.1 add move area, x, y<br /> * @version: 1.2 update mouseup don't capture exception in intenet explore<br /> * @version: 1.3 update range error when lockedR is defalut value: false @date: 2009.09.22 22:33<br /> */<br />;(function($){<br />/**<br /> * @param obj: String id of moving element, or jQuery, or Element<br /> * @param settings: options according to user<br /> * @param lockedX: only move on the horizon<br /> * @param lockedY: only move on the verticality<br /> * @param lockedR: only move on the range<br /> * @param range: the range size<br /> */<br />$.fn.extend({<br />drag : function(obj, settings) {</p><p>var _x, _y;<br />var $this = this.hover(function(){$(this).css("cursor", "move");},function(){$(this).css("cursor", "");});;<br />var $obj = obj === undefined ? $this : (typeof obj === "string" ? $(obj) : $(obj)) ;<br />var isIE = (document.all) ? true : false;</p><p>var options = $.extend({<br />lockedX: false,<br />lockedY: false,<br />lockedR: false,<br />range: { top : 0 , right : $(window).width(), bottom : $(window).height(), left : 0 },<br />position: "static",<br />onStart: function(){},<br />onMove: function(){},<br />onStop: function(){}<br />}, settings);</p><p>if (options.lockedR) {<br />var $parent = $obj.parent();</p><p>// $parent.css('position', options.position); 為什麼用這一句不行？望高手解答！<br />$parent.get(0).style.position = options.position;</p><p>options.range.top = $parent.offset().top + parseInt($parent.css("border-top-width"));// $parent.offset().top不包括邊框的長度<br />options.range.left = $parent.offset().left + parseInt($parent.css("border-left-width"));// $parent.offset().left不包括邊框的長度<br />options.range.bottom = options.range.top + $parent.innerHeight();<br />options.range.right = options.range.left + $parent.innerWidth();<br />}</p><p>$this.mousedown(function(event){<br />options.onStart();<br />// 當前滑鼠距離移動元素上邊框的距離<br />_x = event.clientX - $obj.offset().left;<br />// 當前滑鼠距離移動元素左邊框的距離<br />_y = event.clientY - $obj.offset().top;<br />$(document).bind("mousemove", move).bind("mouseup", stop).bind("blur", stop);<br />});</p><p>// 計算元素的底部和右部滑動範圍<br />var _bottom = options.range.bottom - $obj.outerHeight() - parseInt($(obj).css("margin-top")) - parseInt($(obj).css("margin-bottom"));<br />var _right = options.range.right - $obj.outerWidth() - parseInt($(obj).css("margin-left")) - parseInt($(obj).css("margin-right"));</p><p>function move(event) {<br />//($this[0]).setCapture();<br />// 當前移動元素距視窗上邊框距離<br />var iTop = event.clientY - _y;<br />// 當前移動元素距視窗左邊框距離<br />var iLeft = event.clientX - _x;</p><p>/*<br /> * 按範圍鎖定滑動元素的核心代碼，當前滑動元素在移動時的top和left值的範圍設定<br /> * Top: 大於活動範圍上邊框頂部距離瀏覽器上邊框的距離（還要加活動範圍上邊框的寬度）， 小於活動範圍下邊框頂部距離瀏覽器上邊框的距離減去滑動元素高度<br /> * Left: 大於活動範圍左邊框左部距離瀏覽器左邊框的距離（還要加活動範圍左邊框的寬度）， 小於活動範圍右邊框頂部距離瀏覽器右邊框的距離減去滑動元素寬度<br /> */<br />iTop = Math.min(Math.max(iTop, options.range.top), _bottom);<br />iLeft = Math.min(Math.max(iLeft, options.range.left), _right);</p><p>if (options.lockedX) iTop = $obj.offset().top;<br />if (options.lockedY) iLeft = $obj.offset().left;</p><p>$obj.css({position : 'absolute', left : iLeft + 'px', top : iTop + 'px'});</p><p>options.onMove();</p><p>if (isIE) {<br />//設定滑鼠捕獲<br />$obj.get(0).setCapture();<br />} else {<br />// 阻止預設動作<br />event.preventDefault();<br />}</p><p>}</p><p>function stop(event) {<br />//($this[0]).releaseCapture();<br />$(document).unbind("mousemove").unbind("mouseup");<br />if (isIE) {<br />$obj.get(0).releaseCapture();<br />}<br />options.onStop();<br />}<br />}<br />});<br />})(jQuery);

 

完整Demo下載