jquery拖拽定位

修改他人版本

initDrag(‘.drag‘)
    // 将class或者id渲染成可拖拽
    function initDrag(elem) {
        var isInit = false;
        var defaultZIndex = 1996
        var clickZIndex = 2020;
        $(elem).css({
            "position": "absolute",
            "cursor": "move",
            "z-index": defaultZIndex
        })

        var dragging = false;
        var iX, iY;
        var elemObj; // 当前对象
        $(elem).mousedown(function (e) {

            dragging = true;
            iX = e.clientX - this.offsetLeft;
            iY = e.clientY - this.offsetTop;
            this.setCapture && this.setCapture();
            elemObj = this;
            /*获取位置*/
            // $("#top").val(this.offsetTop)
            // $("#left").val(this.offsetLeft)
            return false;
        });
        console.log("是否已经实例化过:" + isInit)
        document.onmousemove = function (e) {
            if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                var oY = e.clientY - iY;
                $(elemObj).css({
                    "left": oX + "px",
                    "top": oY + "px",
                    "z-index": clickZIndex
                });
                $("#top").val(oY)
                $("#left").val(oX)
                return false;
            }
        };

        $(document).mouseup(function (e) {
            dragging = false;
            e.cancelBubble = true;
            $(elem).css({
                "position": "absolute",
                "cursor": "move",
                "z-index": defaultZIndex
            })
            /*异常补货,避免二次渲染失效*/
            try {
                $(elemObj)[0].releaseCapture();
            } catch (error) {
                console.error(error)
            }

        })
    }

 

jquery拖拽定位

上一篇:解决base64-encoded secret key cannot be null or empty问题


下一篇:webpack之source map的使用