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)
            }

        })
    }
复制代码

 

posted @   闲一话  阅读(325)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示