Javascript 更新围绕单击并拖动的DIV的所有DIV上的DIV坐标

我正在为我的书签应用程序构建一个Google Chrome扩展。该功能之一是能够在屏幕上选择一个区域，并生成一个截图图像，以保存在书签记录的4个图像字段中的1个

下面的动画GIF图像显示了选择过程

我从扩展中提取了这一部分的代码，以使其在JSFIDLE页面的扩展之外工作

---

当前，您可以单击并拖动以选择网页上的区域

我想添加在生成选定区域后拖放该区域的功能

选择框周围的透明灰色覆盖层由4个div组成

• 顶
• 对
• 底部
• 左

因此，当您在选择框上单击（mousedown）并拖动（mousemove）时，需要执行以下操作：

• 更新选择框的坐标。如果单击并向右拖动10px，它会将该10px添加到选择框的CSS

  left

  属性中
• 根据selectionarea框的位置更新顶部覆盖DIV的坐标
• 根据selectionarea框的位置更新右侧覆盖DIV的坐标
• 根据selectionarea框的位置更新底部覆盖DIV的坐标
• 根据selectionarea框的位置更新左覆盖DIV的坐标

因此，随着选择框的拖放移动，环绕选择的这4个div的位置将需要在所有位置移动时更新

现在，在创建选择框时也会发生同样的事情，但我相信移动选择框时会略有不同，因为它的尺寸将是一个设定值，并且不会像创建过程中那样改变

有很多图像裁剪插件都有这个功能，但是它们是根据图像尺寸计算出来的，在我的例子中，它需要使用DOM视口

如果有人可以帮助添加移动功能，可以在这里进行演示：

---

---

你不是用一个div将背景涂成灰色吗？@davegri是的，似乎所有“裁剪”样式的脚本都使用这种方法。我猜是这样，中间的选择DIV将不会有覆盖DIV