Menu
I'm working on a little script that makes an object (div or img) moveable and zoomable within a given frame.
However I came across a few problems I'm not really sure of, because I'm a javascript beginner - so explanation of why those problems occure would be appreciated.
Problems:
start_drag(), while_drag() and stop_drag() returns undefined - why is that? What should be returned?mousedown event to the image. What did I do wrong?Please see my fiddle: https://jsfiddle.net/pow4ngbw/15/
664
Working fine now, was mainly the image css but found several errors (see the new img attribute), also added a few tweaks to make the dragging smoother.
var img_ele = null,
x_cursor = 0,
y_cursor = 0,
x_img_ele = 0,
y_img_ele = 0;
function zoom(zoomincrement) {
img_ele = document.getElementById('drag-img');
var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
img_ele.style.width = (pre_width * zoomincrement) + 'px';
img_ele.style.height = (pre_height * zoomincrement) + 'px';
img_ele = null;
}
document.getElementById('zoomout').addEventListener('click', function() {
zoom(0.5);
});
document.getElementById('zoomin').addEventListener('click', function() {
zoom(1.5);
});
function start_drag() {
img_ele = this;
x_img_ele = window.event.clientX - document.getElementById('drag-img').offsetLeft;
y_img_ele = window.event.clientY - document.getElementById('drag-img').offsetTop;
}
function stop_drag() {
img_ele = null;
}
function while_drag() {
var x_cursor = window.event.clientX;
var y_cursor = window.event.clientY;
if (img_ele !== null) {
img_ele.style.left = (x_cursor - x_img_ele) + 'px';
img_ele.style.top = ( window.event.clientY - y_img_ele) + 'px';
console.log(img_ele.style.left+' - '+img_ele.style.top);
}
}
document.getElementById('drag-img').addEventListener('mousedown', start_drag);
document.getElementById('container').addEventListener('mousemove', while_drag);
document.getElementById('container').addEventListener('mouseup', stop_drag); #drag-img {
cursor: move;
position: relative;
width: 500px;
height: 500px;
}
#container {
overflow: hidden;
background: red;
height: 500px;
width: 500px;
}
.button {
width: 200px;
height: 50px;
} <div id="container">
<img ondragstart="return false" id="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
</div>
<input type="button" id="zoomout" class="button" value="Zoom out">
<input type="button" id="zoomin" class="button" value="Zoom in">
I have taken Bug's code and added features that I need and were requested in the comments. I have updated it to: Keep the image always within the container when zooming or panning, and to encapsulate the implementation inside the zoomer object to keep the global environment clean.
<!DOCTYPE html>
<html>
<head>
<style>
#zoom-img {
cursor: move;
position: relative;
width: 500px;
height: 500px;
}
#zoom-container {
overflow: hidden;
background: red;
height: 500px;
width: 500px;
}
.button {
width: 100px;
height: 50px;
}
</style>
</head>
<body id="fullbody">
<div id="zoom-container">
<img ondragstart="return false" id="zoom-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Cordillera_de_los_Andes.jpg/1024px-Cordillera_de_los_Andes.jpg" />
</div>
<input type="button" id="zoomout" class="button" value="Zoom out">
<input type="button" id="zoomin" class="button" value="Zoom in">
</body>
</html>
<script>
//
// This file is derived from the javascript portion of the drag-zoom example
// at the web site:
// https://stackoverflow.com/questions/35252249/move-drag-pan-and-zoom-object-image-or-div-in-pure-js
//
var zoomer = (function () {
var img_ele = null,
x_cursor = 0,
y_cursor = 0,
x_img_ele = 0,
y_img_ele = 0,
orig_width = document.getElementById('zoom-img').getBoundingClientRect().width,
orig_height = document.getElementById('zoom-img').getBoundingClientRect().height,
current_top = 0,
current_left = 0,
zoom_factor = 1.0;
return {
zoom: function (zoomincrement) {
img_ele = document.getElementById('zoom-img');
zoom_factor = zoom_factor + zoomincrement;
if (zoom_factor <= 1.0)
{
zoom_factor = 1.0;
img_ele.style.top = '0px';
img_ele.style.left = '0px';
}
var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
console.log('prewidth='+img_ele.getBoundingClientRect().width+'; pre_height ='+img_ele.getBoundingClientRect().height);
// img_ele.style.width = (pre_width * zoomincrement) + 'px';
// img_ele.style.height = (pre_height * zoomincrement) + 'px';
var new_width = (orig_width * zoom_factor);
var new_heigth = (orig_height * zoom_factor);
console.log('postwidth='+img_ele.style.width+'; postheight ='+img_ele.style.height);
if (current_left < (orig_width - new_width))
{
current_left = (orig_width - new_width);
}
if (current_top < (orig_height - new_heigth))
{
current_top = (orig_height - new_heigth);
}
img_ele.style.left = current_left + 'px';
img_ele.style.top = current_top + 'px';
img_ele.style.width = new_width + 'px';
img_ele.style.height = new_heigth + 'px';
img_ele = null;
},
start_drag: function () {
if (zoom_factor <= 1.0)
{
return;
}
img_ele = this;
x_img_ele = window.event.clientX - document.getElementById('zoom-img').offsetLeft;
y_img_ele = window.event.clientY - document.getElementById('zoom-img').offsetTop;
console.log('img='+img_ele.toString()+'; x_img_ele='+x_img_ele+'; y_img_ele='+y_img_ele+';')
console.log('offLeft='+document.getElementById('zoom-img').offsetLeft+'; offTop='+document.getElementById('zoom-img').offsetTop)
},
stop_drag: function () {
if (img_ele !== null) {
if (zoom_factor <= 1.0)
{
img_ele.style.left = '0px';
img_ele.style.top = '0px';
}
console.log(img_ele.style.left+' - '+img_ele.style.top);
}
img_ele = null;
},
while_drag: function () {
if (img_ele !== null)
{
var x_cursor = window.event.clientX;
var y_cursor = window.event.clientY;
var new_left = (x_cursor - x_img_ele);
if (new_left > 0)
{
new_left = 0;
}
if (new_left < (orig_width - img_ele.width))
{
new_left = (orig_width - img_ele.width);
}
var new_top = ( y_cursor - y_img_ele);
if (new_top > 0)
{
new_top = 0;
}
if (new_top < (orig_height - img_ele.height))
{
new_top = (orig_height - img_ele.height);
}
current_left = new_left;
img_ele.style.left = new_left + 'px';
current_top = new_top;
img_ele.style.top = new_top + 'px';
//console.log(img_ele.style.left+' - '+img_ele.style.top);
}
}
};
} ());
document.getElementById('zoomout').addEventListener('click', function() {
zoomer.zoom(-0.25);
});
document.getElementById('zoomin').addEventListener('click', function() {
zoomer.zoom(0.25);
});
document.getElementById('zoom-img').addEventListener('mousedown', zoomer.start_drag);
document.getElementById('zoom-container').addEventListener('mousemove', zoomer.while_drag);
document.getElementById('zoom-container').addEventListener('mouseup', zoomer.stop_drag);
document.getElementById('zoom-container').addEventListener('mouseout', zoomer.stop_drag);
</script>
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
