更改拖動重影大小

Question

我如何做到這樣，當我拖動圖像時，拖動的圖像大小會發生變化，具體取決於我指定的內容？ 例如，當我拖動圖像時，我希望在這種情況下重影圖像更改為更大的尺寸 (500)，但實際上可以是任何東西。

Javascript：

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <script src="js/custom.js"></script>
    <style>

        /* Pikachu fits in the container */
        .size {
            height:200px;
            width:200px;
        }
        .size img {
            z-index:10;
            width:100%;
        }
    </style>
    </head>
<body>

    <div class="size">
        <img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png" >
    </div>
</body>
</html>

Answer 1

解讀1
如果您的意思是“幽靈圖像”，當您在任何網站上單擊並拖動圖像時顯示的圖像副本，當您將其拖動到文件夾（請參見下面的屏幕截圖說明我的意思），那么您可以使用新的HTML5 可拖動標簽。 你可以在這里看到更多的例子，你應該閱讀setDragImage() ：

document.getElementById("size").addEventListener("dragstart", function(e) {
    var img = document.createElement("img");
    img.src = "URL to 500px image";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

如果您不想制作 500 像素的圖像副本，您可以按如下方式更改大小，並在此處提供工作演示：

document.getElementById("size").addEventListener("dragstart", function(e) {
    var dragIcon = document.createElement("img");
    dragIcon.src = "http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png";
    dragIcon.style.width = "500px";
    var div = document.createElement('div');
    div.appendChild(dragIcon);
    div.style.position = "absolute"; div.style.top = "0px"; div.style.left= "-500px";
    document.querySelector('body').appendChild(div);
    e.dataTransfer.setDragImage(div, 0, 0);
}, false);

不過這有點setDragImage() ，因為我們需要創建一個div元素，因為setDragImage()將在傳遞img以全尺寸顯示img元素。 然后，我們需要將它添加到頁面，然后將其移出頁面，因為它要求元素可見（因此不允許display:none ）

解讀2
現在，如果您的意思是在頁面上移動圖像時更改圖像的大小，那么您可以使用 jQueryUI 的.draggable()來做到這一點：

$(function() {
    $( ".size" ).draggable({
        opacity:0.6,
        drag: function(event,ui) {
            $("div.size").width(500);
        },
        stop: function(event,ui) {
            $("div.size").width(200);
        }
    });

    $("div.size").width(200);

});

這里的工作演示： https : //jsfiddle.net/9L4hxk1j/

Answer 2

這是使用畫布的簡單小方法，可以根據您想要的任何寬度保持圖像縱橫比。

function onDrag(src, width, e){

  var img = new Image();

  img.onload = function(){
    var ctx = document.createElement("canvas").getContext("2d");
        ctx.canvas.width = width;
        ctx.canvas.height = img.height * (width / img.width);

    ctx.drawImage(img, 0, 0, img.width, img.height);
    e.dataTransfer.setDragImage(ctx.canvas, 40, 20);
  }

  img.src = src;
}

如果您想根據高度設置縱橫比，只需切換寬度和高度即可。

更改拖動重影大小

問題描述

2 個解決方案

解決方案1
3 2015-08-24 22:11:49

解決方案2
0 2016-08-08 20:13:19

更改拖動重影大小

問題描述

2 個解決方案

解決方案1 3 2015-08-24 22:11:49

解決方案2 0 2016-08-08 20:13:19

解決方案1
3 2015-08-24 22:11:49

解決方案2
0 2016-08-08 20:13:19