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插件

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

/**
 * 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.handle
        var dragObj  = $(elem)
        var downObj  = handle ? dragObj.find(handle) : dragObj
        var dargElem = dragObj[0]
 
        // 暂存配置对象
        dragObj.data('optionData', option)
        dragObj.data('originData', $.extend({}, option))
 
        // 设置鼠标状态
        downObj.css('cursor', option.cursor)
 
        // 需要使用的一些状态变量
        var diffX, diffY, viewSize
        var dragElemWidth, dragElemHeight, dragElemMarginTop, dragElemMarginLeft
 
        // 鼠标mousedown
        downObj.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) || 0
            dragElemMarginLeft = parseInt(dargElem.style.marginLeft, 10) || 0
 
            // 仅在窗口可视范围内移动
            if (option.inwin) {
                var winX = viewSize.width - dragElemWidth
                var winY = viewSize.height - dragElemHeight
                option.area = [0, winX, 0, winY]
            }
 
            if (win.captureEvents) { //标准DOM
                ev.stopPropagation()
                ev.preventDefault()
                $win.blur(mouseup)
            } else if(dargElem.setCapture) { //IE
                dargElem.setCapture()
                ev.cancelBubble = true
                dragObj.bind('losecapture', mouseup)
            }
             
            diffX = ev.clientX - dargElem.offsetLeft
            diffY = ev.clientY - dargElem.offsetTop
            $doc.mousemove(mousemove)
            $doc.mouseup(mouseup)
 
            // drag start event
            if (option.start) {
                option.start.call(dragObj)
            }
        })
 
        function mousemove(ev) {
            var minX, maxX, minY, maxY
            var moveX = ev.clientX - diffX
            var 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
                //设置位置，并修正margin
                moveX = moveX - dragElemMarginTop
                moveY = moveY - dragElemMarginLeft
                if (axis === 'x' || axisReg.test(axis)) {
                    dargElem.style.left = moveX + 'px'
                }
                if (axis === 'y' || axisReg.test(axis)) {
                    dargElem.style.top =  moveY + 'px'
                }
            }
            // drag event
            if (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) { //IE
                dragObj.unbind('losecapture', mouseup)
                dargElem.releaseCapture()
            }
            // drag end evnet
            if (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':
                    break
                case 'disable':
                    oldOption.canDrag = false
                    break
                case 'enable':
                    oldOption.canDrag = true
                    break
                case 'reset':
                    var originOption = $self.data('originData')
                    $.extend(true, oldOption, originOption)
                    break
                case 'option':
                    if (key && value === undefined) {
                        return oldOption[key]
                    }
                    switch (key) {
                        case 'axis':
                            oldOption.axis = value
                            break
                        case 'cursor':
                            oldOption.cursor = value
                            break
                        case 'zIndex':
                            oldOption.zIndex = value
                            break
                    }
                    break
                default:;
            }
        } else {
            initilize(option, $self)
        }
    })
}
 
}(this, document, jQuery);