Image Resizer - issue to drag an image into a div

Question

I want to make a little program where we can : - Drag and drop an image into a Div (from desktop to the div of the web page) - Drag the image into this div - Zoom in and zoom out whit the mouse wheel.

what id did is drag and drop an image and its work.. i set an id of the image in my Javascript code and in my console i see that the image receive the id='movable'.. But when i test that in my browser the image doesnt move with my mouse.

Here is my Javascript Code :

//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

I just figured out.. I place my jQuery code inside the makeDroppable function and the image move inside my div and add overflow:hidden in my 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);

Answer 2

Increase image ration on scroll up and decrease it on scroll down.

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