在纯js中移动（拖动/平移）和缩放对象（图像或div） [英] Move (drag/pan) and zoom object (image or div) in pure js
本文介绍了在纯js中移动（拖动/平移）和缩放对象（图像或div）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究一个小脚本，它使一个对象（div或img）在给定的帧内可移动和可缩放。
I'm working on a little script that makes an object (div or img) moveable and zoomable within a given frame.
但是我遇到了一些问题我不太确定，因为我是一个javascript初学者 - 所以解释为什么会出现这些问题将会受到赞赏。
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.
问题：
- 调用函数
start_drag（），while_drag（）和stop_drag（）返回undefined- 为什么？应该返回什么？ - 图像的拖动和移动无法正常工作 - 不是单击鼠标按钮并开始移动图像，我必须单击一次然后启动移动。虽然我将
mousedown事件绑定到图像上。我做错了什么？ - 为什么移动部件不能在移动设备上工作（缩放工作！）？
- Calling the functions
start_drag(),while_drag()andstop_drag()returnsundefined- why is that? What should be returned? - The dragging and moving of the image does not work correctly - instead of clicking the mousebutton down and starting to move the image around, I have to click once and then start moving. Although I bound the
mousedownevent to the image. What did I do wrong? - Why is the moving part not working on mobile (the zooming works!)?
请看我的小提琴： https://jsfiddle.net/pow4ngbw/15/
推荐答案
现在工作正常，主要是图像css但发现了几个错误（参见新的img属性），还添加了一个几个调整，使拖动更顺畅。
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.
<!DOCTYPE html>
<html>
<body>
<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">
</body>
</html>
<script>
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);
</script>
<style>
#drag-img {
cursor: move;
position: relative;
width: 500px;
height: 500px;
}
#container {
overflow: hidden;
background: red;
height: 500px;
width: 500px;
}
.button {
width: 200px;
height: 50px;
}
</style>
这篇关于在纯js中移动（拖动/平移）和缩放对象（图像或div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
