Menu
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>
404
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);
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/
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
