图片拖拽在项目中的实现

公司目前在做一个任务宝的项目，主要是用公众号举行一些活动，通过公众号推送活动的海报，海报上面附有公众号的二维码，当用户扫码进入公众号以后，提示用户需要完成一定数量的分享即可免费赠送相关礼品等等，活动的主要目的是为了涨粉。

其中在生成海报时，为了方便后台人员操作，二维码和头像与海报的合成需要做到拖拽定位，效果如下：

两个图片的拖拽实现代码如下：

代码语言：javascript复制

// 图片拖拽事件
function dragImg(id) {
    // 要拖动的图片
    var obj = document.getElementById(id);
    // 图片的父容器
    var objBox = $(obj).parent();

    // 点击时鼠标相对于拖拽图片右上角的距离
    var disX = 0;
    var disY = 0;

    // 对象拖动时
    obj.onmousedown = function (ev) {
        
        var downEvent = ev || event;

        // 初次图片相对于窗口左上角的位置
        var where= obj.getBoundingClientRect();
        var left = where.left;
        var top = where.top;


        // 要拖动图片的初始化位置
        var offsetLeft;
        var offsetTop;
        if (id == "header") {
            offsetLeft = $('input[name="head-x"]').val();
            offsetTop = $('input[name="head-y"]').val();
        } else if (id == "QRCode") {
            offsetLeft = $('input[name="code-x"]').val();
            offsetTop = $('input[name="code-y"]').val();
        };


        // 计算点击位置相对于图片左上角的偏移距离
        disX = downEvent.clientX - left - offsetLeft;
        if(id=="header"){
            disY = downEvent.clientY - top - offsetTop;
        }else if(id=="QRCode"){
            // 由于二维码的图片初始位置是在左下角
            // 距离顶部已有340px的距离，所以要减去
            disY = downEvent.clientY - (top-340) - offsetTop;
        };

        // 处理兼容性(IE)
        if(obj.setCapture){
            obj.onmousemove=mouseMove;
            obj.onmouseup=mouseUp;
            obj.setCapture();
        }else{
            document.onmousemove=mouseMove;
            document.onmouseup=mouseUp;
        };

        // 移动事件
        function mouseMove(ev) {

            var moveEvent = ev || event;

            var maxLeft = objBox.width() - $(obj).width();
            var maxTop = objBox.height() - $(obj).height();

            var l = moveEvent.clientX - disX - left;
            var t;
            if(id=="header"){
                t = moveEvent.clientY - disY - top;
            }else if(id=="QRCode"){
                t = moveEvent.clientY - disY - ( top - 340);
            };

            // 限制图片的位置范围
            if (l < 0) {
                l = 0;
            } else if (l > maxLeft) {
                l = maxLeft;
            };
            if (t < 0) {
                t = 0;
            } else if (t > maxTop) {
                t = maxTop;
            };


            obj.style.left = l   'px';
            obj.style.top = t   'px';

            // 实时更新头像坐标
            if (id == "header") {
                $('input[name="head-x"]').val(l);
                $('input[name="head-y"]').val(t);

                $('input[name="head-width"]').val($(obj).width());
                $('input[name="head-height"]').val($(obj).height());

            // 实时更新二维码坐标
            } else if (id == "QRCode") {

                $('input[name="code-x"]').val(l);
                $('input[name="code-y"]').val(t);

                $('input[name="code-width"]').val($(obj).width());
                $('input[name="code-height"]').val($(obj).height());

            };
        };

        // 鼠标抬起事件
        function mouseUp() {
            this.onmousemove = null;
            this.onmouseup = null;
            // 释放捕获
            if (this.releaseCapture) {
                this.releaseCapture();
            }
        };

        // 处理兼容性
        return false;
    };

};

二维码 公众号 后台 推送 拖拽

0 人点赞