拖拽功能让页面缩放失效了，怎么解

xiaowenwu

页面缩放效果正常，一拖拽就回到最初的大小了，，然后是可以正常拖拽的，不是图片，就是整个页面加的缩放拖拽效果

liangyongfei

http://docs.wex5.com/wex5-ui-question-list-2112/

xiaowenwu

/ /此处拖拽是以原图进行拖拽，应调整为放大缩小后的图片进行拖拽
this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";



次方法是否要调整修改？

liangyongfei

xiaowenwu 发表于 2017-9-6 19:02
/ /此处拖拽是以原图进行拖拽，应调整为放大缩小后的图片进行拖拽
this.style.webkitTransform = "transla ...

自己 进行 修改，调试 ，和 测试吧！
可以尝试修改！
最终实现就可以了！

思路就是 图片 缩放后，拖拽时也要设置相同大小的缩放设置

xiaowenwu

怎么获取放大缩小后的图片，，臣妾做不到啊。。。

xiaowenwu

liangyongfei 发表于 2017-9-6 18:12
http://docs.wex5.com/wex5-ui-question-list-2112/

就是参看这里面的方法做的，有没有成功的案例。。。

liangyongfei

xiaowenwu 发表于 2017-9-7 11:41
怎么获取放大缩小后的图片，，臣妾做不到啊。。。

你看案例！图片缩放的事件中。是可以得到这些（宽度，高度）变量值的！
把变量设置为全局变量！
拖动的事件中，再把这个变量的值（宽度高度）赋值给图片即可！

动手试试吧！

xiaowenwu

liangyongfei 发表于 2017-9-6 18:12
http://docs.wex5.com/wex5-ui-question-list-2112/

这个案例不是一般的坑，，求修改好、、、、我的已经好了，修改如下，注释掉了好多代码。。。
Model.prototype.pinch = function(event){
                var me=this;
                var id = this.getIDByXID('pinch');
                var posData=me.comp("posData");
                var target = document.getElementById(id);
                touch.on('#' + id, 'touchstart', function(ev){
                /*        ev.preventDefault();*/
                        ev.target=target;
                });
                var initialScale = 1;
                touch.on('#' + id, 'pinch', function(ev){
                /*
                    this.style.webkitTransform = "translate3d(0,0,0)";
                        ev.hasStopedPropagation = true;*/
                        currentScale = ev.scale - 1;
                        currentScale = initialScale + currentScale;
                 currentScale = currentScale > 4 ? 4 : currentScale;//最大倍数2
         currentScale = currentScale < 1 ? 1 : currentScale;//最小倍数1
                        currentScale = currentScale < 1 ? 1 : currentScale;
                        /*var y=this;
                        while(me.getElementByXid('pinch') != y){
                             y = y.parentNode;
                        }*/
                        target.style.webkitTransform = 'scale(' + currentScale + ')';
                });
               
                touch.on('#' + id, 'pinchend', function(ev){
                        initialScale = currentScale;
                });        
               
                        var dx, dy;
                        
                touch.on('#' + id, 'drag', function(ev){
         var x=this;
                        dx = dx || 0;
                        dy = dy || 0;
                        var offx =dx+ ev.x*0.5 + "px";
                        var offy =dy+ev.y*0.5 + "px";
                        target.style.webkitTransform = "scale(" + initialScale + ")" + "translate3d(" + offx + "," + offy + ",0)";

                        
                });
               
                touch.on('#' + id, 'dragend', function(ev){
                        dx += ev.x;
                        dy += ev.y;
                });
        };

xiaowenwu

可以结贴了！

liangyongfei

xiaowenwu 发表于 2017-9-7 18:11
可以结贴了！

我也是拷贝的案例！，，好吧！我把你的代码整理进去！