Javascript自由拖拽类

基本拖拽

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

 

jQuery插件

/*** 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);

 

效果

拖拽状态：x:0, y:0 Drag me. 任意方向 水平方向 垂直方向 停止拖拽 开启拖拽 恢复初始状态

 

dragdrop.zip

总结

以上是生活随笔为你收集整理的Javascript自由拖拽类的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。