CODEWITHSUNDEEP
javascripthtml
Snorlax
Snorlax

Reputation: 4745

Change drag ghost-image size

How do I make it so that when I drag an image, the dragged image size changes, depending what I specify it to? For example, when I drag the image, I want the ghost image to change to a larger size (500) in this case, but could be anything really.

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>

Upvotes: 13

Views: 10340

Answers (2)

hobberwickey
hobberwickey

Reputation: 6414

Here's a simple little way using canvas that keep the image aspect ratio based on whatever width you want. 

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;
}

If you want to base the aspect ratio off a height instead just switch around the width's and heights.

Upvotes: 0

Parker
Parker

Reputation: 8851

Interpretation 1
If you mean "ghost image" as in, the image copy that shows when you click and drag an image on any website, as you drag it to a folder (see screenshot below illustrating what I mean) then you can do that with the new HTML5 draggable label. You can see more examples here, and you should read up on 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);

'ghost' example

If you don't want to have to make a 500px copy of the image, you can change the size as follows, with a working demo here:

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);

It's kind of hacky though, as we need to crate a div element, as setDragImage() will show the img element at full size if passed an img. Then, we need add it to the page, and then move it off the page, as it's required that the element be visible (so display:none isn't allowed)

Interpretation 2
Now, if you mean change the size of an image as you move it around the page, then you can do that with jQueryUI's .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);

});

Working demo here: https://jsfiddle.net/9L4hxk1j/

Upvotes: 5

Related Questions