zoukankan      html  css  js  c++  java
  • 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);
                    }
                });
            });
        }
    });

  • 相关阅读:
    [转]VC++ ^和gcnew
    OPPM 一页纸项目管理 OnePage Project Management
    [转]基础总结篇之五:BroadcastReceiver应用详解 .
    [转]深入浅出Java设计模式之备忘录模式
    [转]面向对象的5条基本设计原则
    [转]UED大全
    [转]VC++动态链接库(DLL)编程深入浅出(zz)
    只有壮年时的不遗余力 才能支撑一生的坎坷与幸福
    [书目20121024]当责 AccountaBility
    node.js入门
  • 原文地址:https://www.cnblogs.com/evablog/p/3591619.html
Copyright © 2011-2022 走看看