DIV 实现可拖拽 功能（留档）

//可拖拽 功能

$.fn.extend({
    //用法：$(element).jqDrag();
    //element需要具备定位属性，需要手动调整层叠样式，这里只是修改鼠标拖动效果
    jqDrag: function () {

        var _drag = false, _self, _x, _y, cw, ch, sw, sh, dragBar, DragCnt,
            vxw = window, vxd = document, vxe = vxd.documentElement, vxg = vxd.getElementsByTagName(‘body‘)[0],
            //dragContent = (typeof dragContent == "undefined") ? dragControl : dragContent;
        _self = this;
        DragCnt = $(_self);
        DragBar = $(".dragbar", DragCnt);

        DragBar.mouseup(function (e) {
            _drag = false;
            document.body.releaseCapture && this.releaseCapture();;
        }).mousedown(function (e) {
            _drag = true;
            _x = e.pageX - parseInt(DragCnt.css("left"));
            _y = e.pageY - parseInt(DragCnt.css("top"));
            winW = vxw.innerWidth || vxe.clientWidth || vxg.clientWidth;
            winH = vxw.innerHeight || vxe.clientHeight || vxg.clientHeight;
            cw = winW;
            ch = winH;
            sw = parseInt(DragCnt.outerWidth());
            sh = parseInt(DragCnt.outerHeight());
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            document.body.setCapture && this.setCapture();
            $(document).mousemove(function (e) {
                DragCnt.attr("posit", _x + "" + e.pageX);
                if (_drag) {
                    var x = e.pageX - _x;
                    var y = e.pageY - _y;
                    x = x < 0 ? x = 0 : x < (cw - sw) ? x : (cw - sw);
                    y = y < 0 ? y = 0 : y < (ch - sh) ? y : (ch - sh);

                    DragCnt.css({ top: y, left: x });
                    DragCnt.attr("posit", x + "_" + y);
                }
            });
        });
    }
});

DIV 实现可拖拽 功能（留档）,布布扣,bubuko.com

DIV 实现可拖拽 功能（留档）

原文：http://www.cnblogs.com/evablog/p/3591619.html