Question

我想在一个小程序中尽我们所能： - 将图像拖放到Div（从桌面到网页的div） - 将图像拖动到此div中 - 放大并缩小鼠标滚轮。

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

这是我的Javascript代码：

ToolTip

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

Answer 2

我刚想通了..我把我的jQuery代码放在makeDroppable函数中，图像在我的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);

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

2 个答案: