需求：
- 图片支持在指定范围内拖动（在一个容器中拖动）
- 图片可以适当的放大缩小（最宽=容器宽度，最高=容器高度）
实现思路：
- 页面布局：容器：container，拖动的对象：box，缩放的触发点：coor
- 拖动：在box上按下鼠标被拖动对象随着鼠标移动而移动，鼠标放开则停止移动
- 缩放：在coor上按下鼠标，box高宽随着鼠标位置变化，鼠标放开则停止变化
技术构思：
- container或者document上增加mousemove事件，记录鼠标位置
- box和coor上增加mousedown事件，用于鼠标按下触发对应事件
- document增加鼠标up事件，如果鼠标放开，则box和coor上的事件恢复初始状态，不再执行
- 一个参数（比如：move），用于控制状态
细节：
- 准备工作：获取对应元素,阻止img拖动
document.getElementsByTagName('img')[0].onmousedown = function (e) {
e.preventDefault()
};
var container = document.getElementById('container');
var box = document.getElementById('box');
var coor = document.getElementById('coor');- box（被拖动对象）增加mousedown事件：
box.addEventListener('mousedown', function(event){
var event = event || window.event,
x = event.pageX - this.offsetLeft - container.offsetLeft, //pageX和clientX：都是相对浏览器左上角的点为参照点，但是pagex不会随页面滚动改变参考值（document左上角），clientx：可视区左上角
y = event.pageY - this.offsetTop - container.offsetTop,
dragBox = {
w: box.offsetWidth,
h: box.offsetHeight,
left: box.offsetLeft,
top: box.offsetTop
};
this.posix = {x, y};
document = Object.assign(document, {
move: true,
move_target: this,
call_position: function (event) {
event = event || window.event;
if (dragBox.left >= 0 && dragBox.top >= 0 && dragBox.left + dragBox.w < container.offsetWidth && dragBox.top + dragBox.h < container.offsetHeight) {
var top = event.pageY - container.offsetTop - y;
var left = event.pageX - container.offsetLeft - x;
box.style.top = top + 'px';
box.style.left = left + 'px';
}
}
})
})- coor(控制缩放)增加mousedown
coor.addEventListener('mousedown', function(event){
var event = event || window.event,
posix = {
w: box.offsetWidth,
h: box.offsetHeight,
x: event.pageX,
y: event.pageY
};
document = Object.assign(document, {
move: true,
call_size: function (event) {
event = event || window.event;
if (posix.w <= container.offsetWidth) {
box.style.width = event.pageX - box.offsetLeft - container.offsetLeft + 'px';
}
if (posix.h <= container.offsetHeight) {
box.style.height = event.pageY - box.offsetTop - container.offsetTop + 'px';
}
}
})
})- document，mousedown/mouseup事件
document.addEventListener('mousemove', function(event){
if (!!this.move) {
var callback = document.call_size || document.call_position
callback();
}
})
document.addEventListener('mouseup', function (e) { //鼠标停止点击将所有的状态置为初始状态
if (!!this.move) {
judgeState();
document = Object.assign(this, {
'move': false,
'call_size': false,
});
}
});