基本拖拽

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自由拖拽类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。