0

このページはhttps://schedule.nookal.com/で作業しています。ご覧のとおり、「イベント」は相互にドラッグおよびドロップできます。「重なり合うイベント」（一度に2つのイベント）のようなものを作りたいです。また、お気づきのとおり、イベントはサイズ変更可能です（下部のサイズを変更することで期間を追加できます）。問題は、jQueryがdivの新しいサイズ変更された部分を検出しないことです（中央のみを検出します）。中間だけでなく、2つの期間の間に衝突がある場合は常にオーバーラップします...また、許容範囲：「タッチ」が機能していないようです...CSSの問題を考えています。助けてください

$(".DivBG[data-occupied=1]").droppable({
accept: $(".DivBG[data-occupied=1]"),
hoverClass: "touch",
greedy: true,
over: function(event, ui) {
    $(ui.draggable).css("width", "125px");
    $(ui.draggable).css("margin-left", "125px");
    $(this).css("width", "125px");
},
out: function(event, ui) {
    $(ui.draggable).css("width", "250px");
    $(ui.draggable).css("margin-left", "0px");
    $(this).css("width", "250px");
    $(ui.draggable).removeClass("overlapdraggable");
} 
});
4

1 に答える 1

2

Jqueryで幅と高さを計算している場合

var width = $(element).css('width');

マージン、パディング、ボーダーを含まない CSS 幅を常に使用します。本質的に、ボックス モデルは考慮されません。

代わりに、次の方法で常にinnerWidthを取得することを保証できます。

var width = $(element).innerWidth();

または.outerWidthと

var width = $(element).outerWidth();

outerWidth() に渡すtrueと、マージンも含まれます (つまり、ボックス モデル全体)。

var width = $(element).outerWidth(true);

Jquery で幅と高さを設定する場合。幅、マージン、パディング、ボーダーは明示的に指定する必要があります。

上記のコードでは、Jquery で必要な寸法を設定していますがouterWidth、各要素に必要な 内に収まるように div を制限するための幅/高さのチェックがありません。

于 2012-08-16T10:05:48.080 に答える