ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jquery拖拽定位

2020-05-30 09:06:46  阅读:457  来源: 互联网

标签:jquery 定位 false val function elemObj var dragging 拖拽


修改他人版本

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,定位,false,val,function,elemObj,var,dragging,拖拽
来源: https://www.cnblogs.com/freeatalk/p/12990774.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有