javascript - 在纯 js 中 move (拖动/平移)和缩放对象(图像或 div)

Question

我正在编写一个小脚本，使对象(div 或 img)可以在给定的框架内 move 和缩放。

但是我遇到了一些我不太确定的问题，因为我是一个 JavaScript 初学者 - 所以解释为什么会出现这些问题将不胜感激。

问题:

1. 调用函数 start_drag()、while_drag() 和 stop_drag() 返回 undefined - 为什么是那？应该退回什么？
2. 图像的拖动和 move 无法正常工作 - 我没有单击鼠标按钮开始四处 move 图像，而是必须单击一次然后开始 move 。虽然我将 mousedown 事件绑定(bind)到图像。我做错了什么？
3. 为什么 move 部分在 move 设备上不起作用(缩放有效!)？

请看我的 fiddle :https://jsfiddle.net/pow4ngbw/15/

Answer 1

现在工作正常，主要是图像 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">