jQuery UIでドラッグ制限

質問

jQuery UIのドラッグ可能なDialogオブジェクトを複数出し、それぞれが重なる位置へのドラッグを制限したいのですが、やり方がわかりません。
ドラッグ時に呼ばれるコールバック関数で重なりチェックし、位置を書き換えできないかと思っています。
どのようにすればよいでしょうか？

回答No.1

my--

var Obj = {
　startPositionList: [], // ドラッグ開始位置オブジェクト保持配列
　overlapJudgment: function(dragElement) {
　　var dragX = dragElement.offsetLeft;
　　var dragY = dragElement.offsetTop;
　　var dragWidth = dragElement.offsetWidth;
　　var dragHeight = dragElement.offsetHeight;
　　var dialogElementList = $('.ui-dialog'); // dialog要素リスト
　　// dialog要素リスト走査
　　for (var i = 0, l = dialogElementList.length; i < l; i++) {
　　　var targetElement = dialogElementList[i];
　　　if (targetElement === dragElement) continue; // ドラッグ要素は対象外
　　　var left = targetElement.offsetLeft;
　　　var top = targetElement.offsetTop;
　　　var areaX = { min: left - dragWidth, max: left + targetElement.offsetWidth };
　　　var areaY = { min: top - dragHeight, max: top + targetElement.offsetHeight };
　　　// 重なり判定
　　　if (dragX > areaX.min && areaX.max > dragX && dragY > areaY.min && areaY.max > dragY) {
　　　　return true;
　　　}
　　}
　　return false;
　},
　makeStopCallback: function(n) {
　　return function() {
　　　var elem = this.parentNode; // ドラッグ要素
　　　if (Obj.overlapJudgment(elem)) { // 重なり判定
　　　　var startPosition = Obj.startPositionList[n];
　　　　// ドラッグ開始位置へ戻す
　　　　elem.style.left = startPosition.left + 'px';
　　　　elem.style.top = startPosition.top + 'px';
　　　　//$(elem).animate({ left: startPosition.left + 'px', top: startPosition.top + 'px' });
　　　}
　　};
　},
　makeStartCallback: function(n) {
　　return function() {
　　　var elem = this.parentNode; // ドラッグ要素
　　　Obj.startPositionList[n] = { left: elem.offsetLeft, top: elem.offsetTop }; // ドラッグ開始位置オブジェクト保持
　　};
　}
};

$(function() {
　$( "#dialog0" ).dialog({
　　dragStart: Obj.makeStartCallback(0),
　　dragStop: Obj.makeStopCallback(0)
　});

　$( "#dialog1" ).dialog({
　　dragStart: Obj.makeStartCallback(1),
　　dragStop: Obj.makeStopCallback(1)
　});

　$( "#dialog2" ).dialog({
　　dragStart: Obj.makeStartCallback(2),
　　dragStop: Obj.makeStopCallback(2)
　});
});

動くコード（良し悪しは置いといて）を読んでみるのが早いと思います。
簡単なコメントしか付けてませんけど、読んでみましょう。

補足

このままコピーペーストして実行しましたが、意図したように動かないようです。
しかし、プログラムの理論は理解できましたが、私の質問で示したものと違っています。

私はドラッグ終了時に判定したいのではなく、ドラッグ中に判定したいのです。
ただし、ドラッグ中に頂いた例のような動作をさせてもダイアログがちらつくだけです。