jquery ui：具有碰撞的其他元素的重定位/调整大小的可拖动元素的碰撞检测

Question

  var overlaps = (function () {
            function getPositions(elem) {
                var pos, width, height;
                pos = jQueryEasyUI(elem).position();
                width = jQueryEasyUI(elem).width();
                height = jQueryEasyUI(elem).height();
                return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
            }

            function comparePositions(p1, p2) {
                var r1, r2;
                r1 = p1[0] < p2[0] ? p1 : p2;
                r2 = p1[0] < p2[0] ? p2 : p1;
                return r1[1] > r2[0] || r1[0] === r2[0];
            }

            return function (a, b) {
                var pos1 = getPositions(a),
                    pos2 = getPositions(b);
                return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
            };
        })();

我在stackoverflow上的某个地方看到了上面的代码，以检测两个拖动对象之间的冲突。 但我的问题远远超出了碰撞的检测范围。我在可放置区域中有几个固定大小的div我拖动其中一个div而不是其他div。然后出现以下情况：

1. 我把div放在其他div上
2. 将div放在另一个
旁边
3. 删除div，使得droppable只覆盖其他div的一部分。

从给定的图像图中可以看出这一点。





红色矩形是可放置的。现在当红色矩形被删除时，将发生以下事情。

1. 如果红色矩形从侧面（左/右）掉落，则黑色矩形的尺寸应缩小以适应掉落元素的大小。它将发生在所有元素中，无论它们是否被部分覆盖。
2. 现在，如果它从上方掉落，则被遮盖的元素应移到下面。

请帮忙！