No.1
- 回答日時:
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)
});
});
動くコード(良し悪しは置いといて)を読んでみるのが早いと思います。
簡単なコメントしか付けてませんけど、読んでみましょう。
この回答への補足
このままコピーペーストして実行しましたが、意図したように動かないようです。
しかし、プログラムの理論は理解できましたが、私の質問で示したものと違っています。
私はドラッグ終了時に判定したいのではなく、ドラッグ中に判定したいのです。
ただし、ドラッグ中に頂いた例のような動作をさせてもダイアログがちらつくだけです。
No.2ベストアンサー
- 回答日時:
>>No.1補足
質問に「ドラッグ時に呼ばれる」って書いてたね。ごめん。
ただ、重なりのチェックと位置情報は揃ってますから、ある程度理解できたのなら
あとは試行錯誤してもらいたいところですけど。
makeStopCallback, makeStartCallback関数の書き換えと
dragStopFlag, dragCallback関数の追加
makeStopCallback: function(n) {
return function(event, ui) {
var elem = this.parentNode;
if (Obj.overlapJudgment(elem)) {
if (Obj.dragStopFlag === null) return; // 何もしない
var startPosition = Obj.startPositionList[n];
// ui.position.left, topで現在位置を取得できます
// ドラッグ開始位置へ戻す
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() {
Obj.dragStopFlag = false;
var elem = this.parentNode;
if (Obj.overlapJudgment(elem)) {
Obj.dragStopFlag = null; // ドラッグ開始位置で重なっていればnull代入
}
Obj.startPositionList[n] = { left: elem.offsetLeft, top: elem.offsetTop }; // ドラッグ開始位置オブジェクト保持
};
},
dragStopFlag: false, // ドラッグ中止フラグ
dragCallback: function() {
var elem = this.parentNode;
if (Obj.overlapJudgment(elem)) {
if (Obj.dragStopFlag === false) Obj.dragStopFlag = true; // ドラッグ中止
} else if (Obj.dragStopFlag === null) Obj.dragStopFlag = false; // ドラッグ開始位置で重なっていれば範囲外でfalse代入
}
-----
$( "#dialog0" ).dialog({
dragStart: Obj.makeStartCallback(0),
dragStop: Obj.makeStopCallback(0),
drag: Obj.dragCallback
});
-----
jQuery UI Draggable 1.8.5の書き換え
160行目あたり
//Call plugins and callbacks and use the resulting position if something is returned
// Obj.dragStopFlagを利用した終了処理
var flag = typeof Obj === 'object' ? Obj.dragStopFlag : false;
if (!noPropagation || flag) {
var ui = this._uiHash();
if(this._trigger('drag', event, ui) === false || flag) {
// このブロックに入ればドラッグ終了
this._mouseUp({});
return false;
}
this.position = ui.position;
}
ドラッグを中止させるメソッドへの参照法が分からないのでフラグ使って無理やり終了処理へ入れてます。
不細工だし参考程度に
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Illustrator(イラストレーター) プロパティパネルを元に戻したい 3 2022/05/02 23:26
- Photoshop(フォトショップ) 【Photoshop】画像拡大時に急激に画面外まで拡大してしまうのを制御したい 1 2023/08/25 03:04
- Word(ワード) Word文書のドラッグ操作による配置調整。 1 2022/10/16 19:24
- Illustrator(イラストレーター) プロパティパネルを元に戻せますか 3 2022/05/07 16:44
- Word(ワード) 表の縦罫線を移動するピッチ 1 2022/10/12 12:24
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- Google Drive Googleドライブでのファイルの移動 2 2022/11/01 14:23
- Chrome(クローム) PCブラウザ(Chrome)で見る “Gmail” のタブの位置が変わっています。 2 2022/08/26 19:17
- Excel(エクセル) Excelでオートフィルのやり方がわかりません。 写真の十字カーソルが黒く変わるはずなのですが変わら 3 2022/07/01 16:36
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
毎日日付の変わるタイミングを...
-
ジェネレーターの作り方
-
jqueryでRSS内のdc:dateなどの...
-
javascriptで同文字の出現回数...
-
ASP.NETのコントロールの値をJa...
-
URLのパラメータを取得しリンク...
-
javascriptで困っています。教...
-
1日1回だけ引けるjavascriptお...
-
択一形式のテストをつくりたいです
-
正規表現について質問です。条...
-
翌月を取得するGASが分かりません
-
スマフォではボタンを表示させ...
-
javascriptエラーの解決策について
-
1日1回だけ引けるjavascriptお...
-
イベントが初めの一回しか起き...
-
javascriptでiframeのURL変更は?
-
フォルダ名をフォルダ内のテキ...
-
C# 演算 分岐処理 繰り返し処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報