使用js、jQuery做在指定区域内鼠标拖动并缩放iframe标签

使用js、jQuery在指定区域内鼠标拖动并缩放iframe标签

• 先是iframe标签拖动问题，这里使用的方法是在iframe标签上方浮动一个遮罩的div，iframe的位置跟随遮罩div的位置变化而被修改显示
  1、这样做的优点是在iframe移动的过程中不会鼠标焦点丢失导致卡顿问题
  2、缺点是无法点击iframe内部（当然iframe的滚动条是可被拖动的）

var diffX = e.pageX - iframe.offsetLeft // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
var diffY = e.pageY - iframe.offsetTop
var left = e.pageX - diffX
var top = e.pageY - diffY
//修改mask遮罩的位置
mask.style.left = left + "px";
mask.style.top = top + "px";
//修改mask位置改变后iframe的位置
iframe.style.left = left + "px";
iframe.style.top = top + "px";

• 下面就是iframe大小缩放问题，这里使用的方法是在iframe标签上方的左下角浮动一个8px*8px大小的div，通过在移动过程中不断计算这个div移动前后的位置差值，再修改iframe的宽高

$(mask).fadeTo(10, 0.2)   // mask.style.opacity = 0.2
disX = e.pageX; // 获取鼠标按下时光标x的值
disY = e.pageY; // 获取鼠标按下时光标Y的值
disW = mask.offsetWidth; // 获取拖拽前div的宽
disH = mask.offsetHeight; // 获取拖拽前div的高
//拖拽时为了对宽和高 限制一下范围，定义两个变量
var W = e.pageX - disX + disW;
var H = e.pageY - disY + disH;
// 修改遮罩div和iframe的位置
mask.style.width = W + 'px';// 拖拽后物体的宽高
mask.style.height = H + 'px';
iframe.style.width = W + 'px';// 拖拽后iframe显示的宽高
iframe.style.height = H + 'px';

问题总结：

1. 使用e.pageX和e.pageY获取鼠标点击时的位置坐标，不使用e.clientX以及e.clientY两个属性，因为模块使用场景可能存在滚动条，这时候e.clientX和e.clientY是鼠标点击时相对可视化窗口的坐标位置，而e.pageX和e.pageY两个属性是鼠标点击时相对文档document的位置（IE浏览器是没给pageX和pageY两个属性的）
2. 模块中使用的是offsetLeft和offsetTop等属性，这样我们获得的是纯数字的结果，就不再需要使用parseInt方法转换
3. 还有就是遮罩div需要空出一块地方给滚动条拖动使用，但是如果主页面分辨率太大导致主页面的滚动条不显示，这时就无法通过计算获取滚动条的宽度，也就无法给iframe的滚动条空出位置点击