javascript - 拖动一个div或者图片出一个范围时，超出的部分颜色变化

Question

Answer 1

可以这么想：比如p1在p2上拖动，p2固定，p1和p2的位置坐标（相对文档左上角的top，left）和大小width，height都可以获取,那么:

每次在p1拖动的时候，当 p1Left < p2Left，即p1超出p2的左侧，此时超出的部分宽度：x = p2Left - p1Left

然后你创建一个 p3: 背景红色，p3Left = p1Left, p3Top = p1Top, p3Left = p1Left, p3Width = x, p3Height = p1Height

此时，超出的部分即为 p3，那么，超出的部分就显示p3的背景红色，这是左侧超出，其余的方向同理。

Answer 2

楼上的方案是一种思路，但是似乎受到楼主图示的干扰。若被拖动对象不是从背景对象一条直边溢出，而是从一个角上溢出当如何？若背景对象的边界不是平直的当如何？甚至被拖动对象的边界都不是平直的又当如何？
这里有一个稍微hack的方法权当讨论。给被拖动对象复制一个重叠的影子对象（使用不同的颜色），影子对象放到背景对象后面（被背景对象遮挡），被拖动对象放到背景对象内部且设定其溢出部分隐藏。拖动操作时让影子对象和被拖动对象同步，这样出来的效果就是溢出部分变色。而且无序考虑溢出的位置和各种边界问题。