Geek Answers Handbook

Resize ghost drag image

How do I make sure that when dragging an image, the size of the dragged image changes, depending on what I specify? For example, when I drag an image, I want the ghost image to change to a larger size (500) in this case, but there might be something 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>
+7
javascript html
source share
2 answers

Interpretation 1
If you mean “ghost image”, as in the picture of the image that appears when you click and drag the image on any website when you drag it to a folder (see the screenshot below that illustrates what I have in mind), you can do this with the new HTML5 draggable label . You can see more examples here , and you should read 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 do not want to make a copy of the image by 500 pixels, you can resize as follows: 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);

This is hacking, although we need to assemble the div element, since setDragImage() will show the img element at full size if img passed. Then we need to add it to the page, and then move it from the page, since it needed to see this element (so display:none not allowed)

Interpretation 2
Now, if you mean resizing the image while moving it around the page, you can do this with 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); });

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

+1
source share

Here's an easy way to use a canvas that maintains the aspect ratio of the image based on any width you need.

 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 focus the aspect ratio on the height, just switch the width and height.

0
source share

More articles:


All Articles