new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到 dragable 是否可拖拽 (true)默认dragX true/false false水平方向不可拖拽 (true)默认dragY true/false false垂直方向不可拖拽 (true)默认area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动callback 拖拽过程中的回调函数
});

/*** jQuery拖拽插件** 简单使用* $(xx).dragable()* * 配置对象 option* $(xx).dargable({*    handle:  // @string   鼠标按下开始拖动的元素*    canDrag: // @boolean  默认: true*    axis:    // @string   拖拽方向，默认: "xy"。x: 仅水平方向，y: 仅垂直方向*    area:    // @array    [minX,maxX,minY,maxY] 拖拽范围 默认任意拖动*    inwin:   // @boolean  仅在浏览器窗口内拖动*    cursor:  // @string   鼠标状态*    zIndex:  // @number   拖拽时zIndex值*    fixed:   // @boolean  出现滚动条时保持fixed 默认true* })* * 方法 method* $(xx).dragable('disable') // 停止拖拽* $(xx).dragable('enable')  // 开启拖拽* $(xx).dragable('reset')   // 重置配置对象option** 事件 event [start:开始拖拽, drag:拖拽中, end:拖拽结束]* $(xx).dragable({*     start: function() {*   *     },*     drag: function() {*   *     },*     end: function() {*   *     }* })*/
~function(win, doc, $) {var $win = $(win)
var $doc = $(doc)
var doc  = $doc[0]/** 获取视窗的宽高*/
function getViewSize() {return {width: $win.width(),height: $win.height()}
}
/** @private initilize 初始化拖拽* @param {Object} option* @param {Object} jqObject*/
function initilize(option, jqObject) {option = option || {}var axisReg = /^xy$/var option = $.extend({handle: '',canDrag: option.canDrag !== false,axis: option.axis || 'xy',area: option.area || [],inwin: option.inwin,cursor: 'move',zIndex: ''}, option)jqObject.each(function(i, elem) {var handle   = option.handlevar dragObj  = $(elem)var downObj  = handle ? dragObj.find(handle) : dragObjvar dargElem = dragObj[0]// 暂存配置对象dragObj.data('optionData', option)dragObj.data('originData', $.extend({}, option))// 设置鼠标状态downObj.css('cursor', option.cursor)// 需要使用的一些状态变量var diffX, diffY, viewSizevar dragElemWidth, dragElemHeight, dragElemMarginTop, dragElemMarginLeft// 鼠标mousedowndownObj.mousedown(function(ev) {// 模拟拖拽，需要设置为绝对定位dragObj.css('position', 'absolute')// 鼠标按下的时候计算下window的宽高，拖拽元素尺寸. // 不要再mousemove内计算viewSize = getViewSize()dragElemWidth = Math.max(dargElem.offsetWidth, dargElem.clientWidth)dragElemHeight = Math.max(dargElem.offsetHeight, dargElem.clientHeight)dragElemMarginTop = parseInt(dargElem.style.marginTop, 10) || 0dragElemMarginLeft = parseInt(dargElem.style.marginLeft, 10) || 0// 仅在窗口可视范围内移动if (option.inwin) {var winX = viewSize.width - dragElemWidthvar winY = viewSize.height - dragElemHeightoption.area = [0, winX, 0, winY]}if (win.captureEvents) { //标准DOMev.stopPropagation()ev.preventDefault()$win.blur(mouseup)} else if(dargElem.setCapture) { //IEdargElem.setCapture()ev.cancelBubble = truedragObj.bind('losecapture', mouseup)}diffX = ev.clientX - dargElem.offsetLeftdiffY = ev.clientY - dargElem.offsetTop$doc.mousemove(mousemove)$doc.mouseup(mouseup)// drag start eventif (option.start) {option.start.call(dragObj)}})function mousemove(ev) {var minX, maxX, minY, maxYvar moveX = ev.clientX - diffXvar moveY = ev.clientY - diffY// 设置拖拽范围if (option.area) {minX = option.area[0]maxX = option.area[1]minY = option.area[2]maxY = option.area[3]moveX < minX && (moveX = minX) // left 最小值moveX > maxX && (moveX = maxX) // left 最大值moveY < minY && (moveY = minY) // top 最小值moveY > maxY && (moveY = maxY) // top 最大值}// 设置是否可拖拽，有时可能有取消元素拖拽行为的需求if (option.canDrag) {var axis = option.axis//设置位置，并修正marginmoveX = moveX - dragElemMarginTopmoveY = moveY - dragElemMarginLeftif (axis === 'x' || axisReg.test(axis)) {dargElem.style.left = moveX + 'px'}if (axis === 'y' || axisReg.test(axis)) {dargElem.style.top =  moveY + 'px'}}// drag eventif (option.drag) {option.drag.call(dragObj, moveX, moveY)}}function mouseup(ev) {// 删除事件注册$doc.unbind('mousemove', mousemove)$doc.unbind('mouseup', mouseup)if (win.releaseEvents) { //标准DOM$win.unbind('blur', mouseup)} else if(dargElem.releaseCapture) { //IEdragObj.unbind('losecapture', mouseup)dargElem.releaseCapture()}// drag end evnetif (option.end) {option.end.call(dragObj)}}})
}/** @method dragable jQuery拖拽插件* @param {Object} option* @param {String} key* @param {String} value*/
$.fn.dragable = function(option, key, value) {return this.each(function() {var $self = $(this)if (typeof option === 'string') {var oldOption = $self.data('optionData')switch (option) {case 'destroy':breakcase 'disable':oldOption.canDrag = falsebreakcase 'enable':oldOption.canDrag = truebreakcase 'reset':var originOption = $self.data('originData')$.extend(true, oldOption, originOption)breakcase 'option':if (key && value === undefined) {return oldOption[key]}switch (key) {case 'axis':oldOption.axis = valuebreakcase 'cursor':oldOption.cursor = valuebreakcase 'zIndex':oldOption.zIndex = valuebreak}breakdefault:;}} else {initilize(option, $self)}})
}}(this, document, jQuery);