Question

我有这个页面正在处理https://schedule.nookal.com/，正如您所看到的，“事件”是可拖动的并且可以互相放置。我想制作类似“重叠事件”的东西（一次2个事件）。而你也可以注意到，事件是可调整大小的（你可以通过调整底部来增加持续时间），问题是jQuery没有检测到div的新调整大小的部分（它只检测它的中间）我希望元素能够每当两个持续时间之间发生碰撞时重叠，不仅是中间...而且，宽容：“触摸”似乎不起作用......我在想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");
} 
});

Answer 1

使用Jquery

计算宽度和高度时

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

将始终采用不包括边距，填充或边框的CSS宽度。从本质上讲，它不会考虑箱型号。

相反，您可以保证始终获得innerWidth：

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

或.outerWidth与

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

如果您将true传递给outerWidth（），它也会包含边距（即整个框模型）

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

使用Jquery设置宽度和高度时。必须明确说明宽度，边距，填充和边框。

在上面的代码中，您在Jquery中设置了必要的尺寸，但是您没有任何宽度/高度检查来约束您的div以适应每个元素所需的outerWidth。

JQuery Element没有掉线

1 个答案: