Javascript 图像大小调整器-将图像拖动到div中的问题

我想制作一个小程序，我们可以： -将图像拖放到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;    
});

//创建动态分区
monDiv=document.createElement（“div”）；
monDiv.id='dropZone'；
monDiv.innerHTML='Glissez deposez une image'；
文件.正文.附件（monDiv）；
//拖放
（功能（窗口）{
函数触发器回调（e，回调）{
如果（！callback | | typeof callback！=“function”）{
返回；
}
var文件；
如果（如数据传输）{
files=e.dataTransfer.files；
}否则，如果（如目标）{
files=e.target.files；
}
callback.call（null，文件）；
}
函数makeDropable（ele，回调）{
var input=document.createElement（'input'）；
input.setAttribute（'type'，'file'）；
input.setAttribute（'multiple'，true）；
input.style.display='none'；
input.addEventListener（'change'，函数（e）{
触发回调（e，回调）；
});
ele.appendChild（输入）；
ele.addEventListener（'dragover'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
ele.classList.add（'dragover'）；
});
元素addEventListener（'dragleave'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
ele.classList.remove（'dragover'）；
});
ele.addEventListener（'drop'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
ele.classList.remove（'dragover'）；
触发回调（e，回调）；
});   
}
window.makedropable=makedropable；
})（本条）；
（功能（窗口）{
makedropable（window.document.querySelector（“#dropZone”）、函数（文件）{
console.log（文件）；
var输出=document.querySelector（“#dropZone”）；
output.innerHTML=''；
对于（var i=0；i在向上滚动时增加图像比例，在向下滚动时减少图像比例

        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');
    },

我刚刚发现..我将jQuery代码放在makeDropable函数中，图像移动到div中并添加溢出：隐藏在css中

(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" />';
          //DRAG
          $( "#movable" ).draggable();
        }
     }
    });
     })(this);

（功能（窗口）{
makedropable（window.document.querySelector（“#dropZone”）、函数（文件）{
console.log（文件）；
var输出=document.querySelector（“#dropZone”）；
output.innerHTML=''；
对于（var i=0；iHello@Radhey！你有从鼠标光标放大和缩小的解决方案吗？我知道它将如何实现。你必须调用JavaScript scroll in and scroll out函数，并在那里调用放大和缩小事件。谢谢！你能看一下这篇文章吗？：我做了你说的，但总是一样的事情！非常感谢：）让我查一下，然后再打给你。