drap插件

//jquery1.8.3

;(function($,window,document,undefined) {
	var pluginName = "drag",
	defaults = {
		onDrag: function(event,elem){},
		onMove: function(event,elem){},
		onDrop: function(event,elem){}
	},
	Plugin = function(elem,options) {
		options = $.extend({},defaults,options);  
		//合并后赋给option,如果option参数和defaults一致，后面覆盖前面
		var doc = $(document),
			$elem = $(elem),
			offset = null;

		var start = function(e) {
			var pos = $elem.offset();
			offset = {   //鼠标指针的位置 - parse,解析字符串成浮点型
				x: e.pageX - (parseFloat($elem.css('left')) || 0),
				y: e.pageY - (parseFloat($elem.css('top')) || 0)
			} 

			options.onDrag(e,elem);
			doc.on("mousemove.draggable",moveMe);
			doc.on("mouseup",end);

			e.preventDefault(); //防止链接打开 URL：
		};

		var moveMe = function(e) {
			$elem.stop().css({
				top: e.pageY - offset.y,
				left: e.pageX - offset.x
			});
			options.onMove(e,elem);
		};

		var end = function(e) {
			options.onDrop(e,elem);
			doc.off("mousemove.draggable",moveMe);
		};

		$elem.on("mousedown", start);
	};

	//fn 其实就是 JavaScript 中 propotype 的一个别名，$ 是 jQuery 的别名,pluginName 才是函数名
	//加了 return this.each... 表示返回jQuery对象，以便链接式操作
	$.fn[pluginName] = function(options) {
		return this.each(function() {
			new Plugin(this,options);
		});
	};
}(jQuery, window, document));