javascript - Image Resizer - 将图像拖到 div 中的问题

Question

我想做一个小程序，我们可以:- 将图像拖放到 Div 中(从桌面到网页的 div)- 将图像拖入此 div- 使用鼠标滚轮放大和缩小。

id 所做的是拖放图像及其工作..我在我的 Javascript 代码中设置了图像的 ID，在我的控制台中我看到该图像接收到 id='movable'.. 但是当我在我的浏览器中测试它时，图像不会随着我的鼠标移动。

这是我的 Javascript 代码:

//Creation d'un DIV dynamique
monDiv = document.createElement("div");
monDiv.id = 'dropZone';
monDiv.innerHTML = '<h4>Glissez deposez une image</h4>'; 
document.body.appendChild(monDiv);

//Drag And Drop
(function(window) {
  function triggerCallback(e, callback) {
   if(!callback || typeof callback !== 'function') {
    return;
      }
      var files;
      if(e.dataTransfer) {
        files = e.dataTransfer.files;
      } else if(e.target) {
        files = e.target.files;
      }
      callback.call(null, files);
    }
    function makeDroppable(ele, callback) {
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('multiple', true);
      input.style.display = 'none';
      input.addEventListener('change', function(e) {
        triggerCallback(e, callback);
      });
      ele.appendChild(input);  

      ele.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.add('dragover');
      });

      ele.addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
      });

      ele.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
        triggerCallback(e, callback);
      });   
    }
    window.makeDroppable = makeDroppable;
  })(this);

  (function(window) {
    makeDroppable(window.document.querySelector('#dropZone'), function(files) {
      console.log(files);
      var output = document.querySelector('#dropZone');
      output.innerHTML = '';
      for(var i=0; i<files.length; i++) {
        if(files[i].type.indexOf('image/') === 0) {
          output.innerHTML += '<img src="' + URL.createObjectURL(files[i]) + '" id="movable" />';
        }
      }
    });
  })(this);


//DRAG

$('#movable').on('mousedown', function (e) {
  $(this).addClass('active'); 
  var oTop = e.pageY - $('.active').offset().top;
  var oLeft = e.pageX - $('.active').offset().left; 
  $(this).parents().on('mousemove', function (e) {
      $('.active').offset({
          top: e.pageY - oTop,
          left: e.pageX - oLeft
      });     
   });     
   $(this).on('mouseup', function () {
        $(this).removeClass('active');
   });     
  return false;    
});

Answer 1

向上滚动时增加图像比例，向下滚动时减少图像比例。

        zoomIn: function ()
        {
            image.ratio*=1.1;
            createBackground();
        },
        zoomOut: function ()
        {
            image.ratio*=0.9;
            createBackground();
        }

    createBackground = function()
    {
        var w =  parseInt(image.width)*image.ratio;
        var h =  parseInt(image.height)*image.ratio;

        //Element in which image is available
        var pw = (el.clientWidth - w) / 2;
        var ph = (el.clientHeight - h) / 2;

        el.setAttribute('style',
            'background-image: url(' +image.src + '); ' +
            'background-size: ' + w +'px ' + h + 'px; ' +
            'background-position: ' + pw + 'px ' + ph + 'px; ' +
            'background-repeat: no-repeat');
    },