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="!025Pikachu_OS_anime_4.png" >
</div>
</body>
</html>
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/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png" >
</div>
</body>
</html>
- Is this what you are looking for fiddle ? – DavidDomain Commented Aug 13, 2015 at 18:19
- I edited my post, realized it was confusing, jQuery has nothing to do with it, so edited it all out. All I want is when you drag the image, I would like that dragged "ghost-image" to be a different size. – Snorlax Commented Aug 13, 2015 at 18:22
- 1 Well, there is no big difference, just select the appropriate element fiddle . – DavidDomain Commented Aug 13, 2015 at 18:30
- @Snorlax do you mean when you drag an image on any webpage to the desktop, it shows a transparent "ghost-like" image? Or do you want the user to be able to drag the image around the page, as in the fiddle? – Parker Commented Aug 24, 2015 at 22:04
- @Snorlax I think I see what you mean now, check my updated answer and let me know if it's what you wanted – Parker Commented Aug 24, 2015 at 23:00
2 Answers
Reset to default 5Interpretation 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);
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/__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/9L4hxk1j/
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.