logo标签列表

在纯JS中移动（拖动/滑动）和缩放对象（图像或div）

javascriptzoomingmovedragpan
7

我正在编写一个小脚本，使得一个对象（div或img）可以在给定的框架内移动和缩放。

然而，我遇到了一些问题，因为我是JavaScript初学者 - 所以解释为什么出现这些问题将会很有帮助。

问题：

  1. 调用函数start_drag()、while_drag()和stop_drag()返回undefined - 为什么会这样？应该返回什么？
  2. 图像的拖拽和移动没有正确地工作 - 我必须先单击鼠标按钮，然后才能开始移动图像，而不是直接按住鼠标左键移动。尽管我将mousedown事件绑定到了图像上。我做错了什么？
  3. 为什么移动部分在移动设备上不能工作（缩放可以！）？

请参见我的fiddle：https://jsfiddle.net/pow4ngbw/15/

你的 start_drag()、while_drag() 和 stop_drag() 函数没有明确返回任何内容，因此它们“返回”未定义... - ronapelbaum
它在移动设备上无法工作，因为它没有触摸事件。 - Bug
请查看以下链接：https://dev59.com/gl0a5IYBdhLWcg3wAEk3 - ronapelbaum
感谢 @ronapelbaum - 不过我需要使用纯 JavaScript 而不是 jQuery。 - sangrila B
2个回答
8

现在工作良好，主要是图片CSS的问题，但发现了几个错误（请参见新的img属性），还添加了一些调整以使拖动更加流畅。

 
    var img_ele = null,
      x_cursor = 0,
      y_cursor = 0,
      x_img_ele = 0,
      y_img_ele = 0;
    
    function zoom(zoomincrement) {
      img_ele = document.getElementById('drag-img');
      var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
      img_ele.style.width = (pre_width * zoomincrement) + 'px';
      img_ele.style.height = (pre_height * zoomincrement) + 'px';
      img_ele = null;
    }
    
    document.getElementById('zoomout').addEventListener('click', function() {
      zoom(0.5);
    });
    document.getElementById('zoomin').addEventListener('click', function() {
      zoom(1.5);
    });
    
    function start_drag() {
      img_ele = this;
      x_img_ele = window.event.clientX - document.getElementById('drag-img').offsetLeft;
      y_img_ele = window.event.clientY - document.getElementById('drag-img').offsetTop;
      
    }
    
    function stop_drag() {
      img_ele = null;
    }
    
    function while_drag() {
      var x_cursor = window.event.clientX;
      var y_cursor = window.event.clientY;
      if (img_ele !== null) {
        img_ele.style.left = (x_cursor - x_img_ele) + 'px';
        img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';
        
          console.log(img_ele.style.left+' - '+img_ele.style.top);
    
      }
    }
    
    document.getElementById('drag-img').addEventListener('mousedown', start_drag);
    document.getElementById('container').addEventListener('mousemove', while_drag);
    document.getElementById('container').addEventListener('mouseup', stop_drag);
 #drag-img {
      cursor: move;
      position: relative;
      width: 500px;
      height: 500px;
    }
    
    #container {
      overflow: hidden;
      background: red;
      height: 500px;
      width: 500px;
    }
    
    .button {
      width: 200px;
      height: 50px;
    }
 <div id="container">
      <img ondragstart="return false" id="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
    </div>
    <input type="button" id="zoomout" class="button" value="Zoom out">
    <input type="button" id="zoomin" class="button" value="Zoom in">

没有添加触摸事件，因此仍无法在移动设备上运行。 - Bug
非常感谢@Bug！我创建了一个新的fiddle https://jsfiddle.net/azyb9mzz/请问您能否解释一下为什么将事件监听器挂钩到容器div而不是图像对象本身？我尝试添加触摸事件（touchstart，touchmove和touchend）-似乎部分工作，因为我收到了正确的控制台警报。但是图像的样式位置没有更新，因此没有移动...但是为什么？ - sangrila B
我钩入了容器事件，因为如果你快速移动鼠标，拖动会停顿，更好的方法是使用body的事件。 - Bug
2
我注意到当您开始拖动时会出现轻微跳动，请在start_drag事件中将x_img_ele和y_img_ele添加+8。 - Bug
任何想查看此解决方案演示的人，请移除#container的边距，然后在fiddle上查看多么漂亮地完成了。https://jsfiddle.net/shabeerak/ne8em13t/5/ - Shabeer
显示剩余3条评论
1
我已经采用了Bug的代码，并添加了我需要和评论中请求的功能。我已经更新了它，以便在缩放或平移时始终将图像保持在容器内，并将实现封装在zoomer对象内，以保持全局环境的清洁。
<!DOCTYPE html>
<html>
<head>
<style>
#zoom-img {
  cursor: move;
  position: relative;
  width: 500px;
  height: 500px;
}

#zoom-container {
  overflow: hidden;
  background: red;
  height: 500px;
  width: 500px;
}

.button {
  width: 100px;
  height: 50px;
}
</style>
</head>
<body id="fullbody">
<div id="zoom-container">
  <img ondragstart="return false" id="zoom-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Cordillera_de_los_Andes.jpg/1024px-Cordillera_de_los_Andes.jpg" />
</div>
<input type="button" id="zoomout" class="button" value="Zoom out">
<input type="button" id="zoomin" class="button" value="Zoom in">
</body>
</html>
<script>
//
//    This file is derived from the javascript portion of the drag-zoom example
//    at the web site: 
//     https://dev59.com/cpPfa4cB1Zd3GeqPIdRj
//

var zoomer = (function () {
    var img_ele = null,
      x_cursor = 0,
      y_cursor = 0,
      x_img_ele = 0,
      y_img_ele = 0,
      orig_width = document.getElementById('zoom-img').getBoundingClientRect().width,
      orig_height = document.getElementById('zoom-img').getBoundingClientRect().height,
      current_top = 0,
      current_left = 0,
      zoom_factor = 1.0;

    return {
        zoom: function (zoomincrement) {
            img_ele = document.getElementById('zoom-img');
            zoom_factor = zoom_factor + zoomincrement;
            if (zoom_factor <= 1.0)
            {
                zoom_factor = 1.0;
                img_ele.style.top =  '0px';    
                img_ele.style.left = '0px';
            }
            var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
            console.log('prewidth='+img_ele.getBoundingClientRect().width+'; pre_height ='+img_ele.getBoundingClientRect().height);
        //  img_ele.style.width = (pre_width * zoomincrement) + 'px';
        //  img_ele.style.height = (pre_height * zoomincrement) + 'px';
            var new_width = (orig_width * zoom_factor);
            var new_heigth = (orig_height * zoom_factor);

                console.log('postwidth='+img_ele.style.width+'; postheight ='+img_ele.style.height);

            if (current_left < (orig_width - new_width))
            {
                current_left = (orig_width - new_width);
            }
            if (current_top < (orig_height - new_heigth))
            {
                current_top = (orig_height - new_heigth);
            }
            img_ele.style.left = current_left + 'px';
            img_ele.style.top = current_top + 'px';
            img_ele.style.width = new_width + 'px';
            img_ele.style.height = new_heigth + 'px';

            img_ele = null;
        },

        start_drag: function () {
          if (zoom_factor <= 1.0)
          {
             return;
          }
          img_ele = this;
          x_img_ele = window.event.clientX - document.getElementById('zoom-img').offsetLeft;
          y_img_ele = window.event.clientY - document.getElementById('zoom-img').offsetTop;
          console.log('img='+img_ele.toString()+'; x_img_ele='+x_img_ele+'; y_img_ele='+y_img_ele+';')
          console.log('offLeft='+document.getElementById('zoom-img').offsetLeft+'; offTop='+document.getElementById('zoom-img').offsetTop)
        },

        stop_drag: function () {
          if (img_ele !== null) {
            if (zoom_factor <= 1.0)
            {
              img_ele.style.left = '0px';
              img_ele.style.top =  '0px';      
            }
            console.log(img_ele.style.left+' - '+img_ele.style.top);
            }
          img_ele = null;
        },

        while_drag: function () {
            if (img_ele !== null)
            {
                var x_cursor = window.event.clientX;
                var y_cursor = window.event.clientY;
                var new_left = (x_cursor - x_img_ele);
                if (new_left > 0)
                {
                    new_left = 0;
                }
                if (new_left < (orig_width - img_ele.width))
                {
                    new_left = (orig_width - img_ele.width);
                }
                var new_top = ( y_cursor - y_img_ele);
                if (new_top > 0)
                {
                    new_top = 0;
                }
                if (new_top < (orig_height - img_ele.height))
                {
                    new_top = (orig_height - img_ele.height);
                }
                current_left = new_left;
                img_ele.style.left = new_left + 'px';
                current_top = new_top;
                img_ele.style.top = new_top + 'px';

                //console.log(img_ele.style.left+' - '+img_ele.style.top);
            }
        }
    };
} ());

document.getElementById('zoomout').addEventListener('click', function() {
  zoomer.zoom(-0.25);
});
document.getElementById('zoomin').addEventListener('click', function() {
  zoomer.zoom(0.25);
});

document.getElementById('zoom-img').addEventListener('mousedown', zoomer.start_drag);
document.getElementById('zoom-container').addEventListener('mousemove', zoomer.while_drag);
document.getElementById('zoom-container').addEventListener('mouseup', zoomer.stop_drag);
document.getElementById('zoom-container').addEventListener('mouseout', zoomer.stop_drag);

</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接