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

Question

Answer 1

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

每次在div1拖动的时候，当 div1Left < div2Left，即div1超出div2的左侧，此时超出的部分宽度：x = div2Left - div1Left

然后你创建一个 div3: 背景红色，div3Left = div1Left, div3Top = div1Top, div3Left = div1Left, div3Width = x, div3Height = div1Height

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

Answer 2

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