登录  /  注册
javascript - 关于trasform后的坐标计算的问题
巴扎黑
巴扎黑 2017-07-01 09:12:23
[CSS3讨论组]

我在做了一个图片在父容器内拖动的功能后,将父容器用transform变化了一下,旋转啊拉伸啊什么的,之后坐标的计算就开始紊乱了,我想问一下如果想让他正常工作的话应该怎么做?
拖动的代码如下:
$(function(){

 var dragging = false;
        var iX, iY;
        var qX, qY;
        var tempid;
         $(".dragcontain").mousedown(function(e) {
            dragging = true;
            iX = accSub(e.clientX,this.offsetLeft);
            iY = accSub(e.clientY,this.offsetTop);                
            qX = $(e.target).children().position().left;
            qY = $(e.target).children().position().top;
            console.log(qX,qY);
            console.log(iX,iY);
            this.setCapture && this.setCapture();
             return false;
        });
        document.onmousemove = function(e) {
            if (dragging) {
            var e = e || window.event;
            console.log("sX:",e.clientX,"sY:",e.clientY);
            var nX = accSub(e.clientX,e.target.offsetLeft);
            var nY = accSub(e.clientY,e.target.offsetTop);
            console.log(e.clientX,e.target.offsetLeft)
            var mX = accSub(nX,iX);
            var mY = accSub(nY,iY);
            var oX = accAdd(qX,mX);
            var oY = accAdd(qY,mY);
            $(e.target).children().css({"left":oX + "px", "top":oY + "px"});
            console.log("iX:",iX,"iY:",iY);
            console.log("oX:",oX,"oY:",oY);
            console.log("nX:",nX,"nY:",nY);
            console.log("mX:",mX,"mY:",mY);
            console.log("qX:",qX,"qY:",qY);
            console.log("");
            return false;
            }
        };
        $(document).mouseup(function(e) {
            dragging = false;
            e.cancelBubble = true;
            iX=0;
            iY=0;
        })    

})

光光是将dragcontain给rotate(45deg)旋转后就开始乱了,坐标直接到-1000多去了

巴扎黑
巴扎黑

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号