大家好!
我的简单单日日历脚本遇到了问题。
我的任务是创建一个单日日历，显示从上午 9 点到下午 6 点的每个街区小时。如果一个事件与另一个事件重叠，则它们的宽度应相等且不重叠。我已经成功地为两个事件实现了这一点，但是如果有两个以上的重叠，事情就有点不对劲了，我需要帮助找出一种方法来解决这个问题，在任何数量的事件重叠的情况下，它们的宽度将相等。
使用全局函数在日历上呈现事件:
渲染日([{开始:30，结束:120}，{开始:60，结束:120}])
它以一个对象数组作为参数，其中整数是从上午 9 点开始粘贴的分钟数。例如。 30 是上午 9:30，120 是上午 11 点
这是我从 stackoverflow 获取的碰撞函数
// collision function to return boolean
// attribute: http://stackoverflow.com/questions/14012766/detecting-whether-two-divs-overlap
function collision($div1, $div2) {
let x1 = $div1.offset().left;
let y1 = $div1.offset().top;
let h1 = $div1.outerHeight(true);
let w1 = $div1.outerWidth(true);
let b1 = y1 + h1;
let r1 = x1 + w1;
let x2 = $div2.offset().left;
let y2 = $div2.offset().top;
let h2 = $div2.outerHeight(true);
let w2 = $div2.outerWidth(true);
let b2 = y2 + h2;
let r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
我在所有要检查重叠的事件 div 上运行一个循环
// JQuery on each, check if collision
$('.event').each(function(index, value) {
// statement to break out on final loop
if(index === $('.event').length - 1) return;
console.log('at index: ', index);
// if collison === true, halve width of both event divs, re-position
if(collision( $('#e-'+index) , $('#e-'+(index + 1)) )) {
$('#e-'+index).css('width', $('#e-'+index).width() / 2);
$('#e-'+(index+ 1)).css('width', $('#e-'+(index+ 1)).width() / 2).css('left', $('#e-'+(index + 1)).width());
if(collision)
}
})
}
})
帮助可视化的屏幕截图:)
When two overlap, they have equal widths
When three or more overlap, things go wrong
任何帮助将不胜感激! 数据中心
最佳答案
查看代码后，当您可以从开始时间和结束时间解决碰撞时，检查渲染元素的碰撞似乎过于复杂。
我的做法是将发生碰撞的事件分组，如下所示:
let collisions = [
// only 1 event in this array so no collisions
[{
start: 30,
end: 120
}],
// 3 events in this array which have overlapping times
[{
start: 300,
end: 330
}, {
start: 290,
end: 330
}, {
start: 300,
end: 330
}]
];
然后我们遍历每组碰撞，并创建具有适当宽度和位置的元素。
for (var i = 0; i < collisions.length; i++) {
var collision = collisions[i];
for (var j = 0; j < collision.length; j++) {
var event = collision[j];
let height = event.end - event.start;
let top = event.start + 50;
// 360 = max width of event
let width = 360 / collision.length;
// a lot of this could be moved into a css class
// I removed the "display: inline-block" code because these are absolutely positioned. Replaced it with "left: (j * width)px"
let div = $(`<div id=${'e-'+ (i + j)}>`).css('position', 'absolute').css('top', top)
.css('height', height).css('width', width).css('left', (j * width) + 'px')
.css('backgroundColor', arrayOfColors.shift()).addClass('event')
.text('New Event').css('fontWeight', 'bold');
// append event div to parent container
$('#events').append(div);
}
}
//**********************************************************************
//
// TITLE - Thought Machine Coding Challenge, Single Day Calendar
// AUTHOR - DOUGLAS WISSETT WALKER
// DATE - 21/04/2016
// VERSION - 0.0.3
// PREVIOUS - 0.0.2
//
//**********************************************************************
let arr = [{
start: 30,
end: 120
}, {
start: 70,
end: 180
}, {
start: 80,
end: 190
}, {
start: 300,
end: 330
}, {
start: 290,
end: 330
}, {
start: 220,
end: 260
}, {
start: 220,
end: 260
}, {
start: 220,
end: 260
}, {
start: 220,
end: 260
}, {
start: 400,
end: 440
}, {
start: 20,
end: 200
}];
let renderDay;
$(document).ready(() => {
renderDay = function(array) {
$('.event').each(function(i, el) {
$(el).remove();
});
// background colors for events
let arrayOfColors = [
'rgba(255, 153, 153, 0.75)',
'rgba(255, 204, 153, 0.75)',
'rgba(204, 255, 153, 0.75)',
'rgba(153, 255, 255, 0.75)',
'rgba(153, 153, 255, 0.75)',
'rgba(255, 153, 255, 0.75)'
]
let collisions = mapCollisions(array);
let eventCount = 0; // used for unique id
for (let i = 0; i < collisions.length; i++) {
let collision = collisions[i];
for (let j = 0; j < collision.length; j++) {
let event = collision[j];
let height = event.end - event.start;
let top = event.start + 50;
// 360 = max width of event
let width = 360 / collision.length;
// a lot of this could be moved into a css class
// I removed the "display: inline-block" code because these are absolutely positioned
// Replaced it with "left: (j * width)px"
let div = $("<div id='e-" + eventCount + "'>").css('position', 'absolute').css('top', top)
.css('height', height).css('width', width).css('left', (j * width) + 'px')
.css('backgroundColor', arrayOfColors.shift()).addClass('event')
.text('New Event').css('fontWeight', 'bold');
eventCount++;
// append event div to parent container
$('#events').append(div);
}
}
}
renderDay(arr);
});
// Sorry this is pretty messy and I'm not familiar with ES6/Typescript or whatever you are using
function mapCollisions(array) {
let collisions = [];
for (let i = 0; i < array.length; i++) {
let event = array[i];
let collides = false;
// for each group of colliding events, check if this event collides
for (let j = 0; j < collisions.length; j++) {
let collision = collisions[j];
// for each event in a group of colliding events
for (let k = 0; k < collision.length; k++) {
let collidingEvent = collision[k]; // event which possibly collides
// Not 100% sure if this will catch all collisions
if (
event.start >= collidingEvent.start && event.start < collidingEvent.end || event.end <= collidingEvent.end && event.end > collidingEvent.start || collidingEvent.start >= event.start && collidingEvent.start < event.end || collidingEvent.end <= event.end && collidingEvent.end > event.start) {
collision.push(event);
collides = true;
break;
}
}
}
if (!collides) {
collisions.push([event]);
}
}
console.log(collisions);
return collisions;
}html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#container {
height: 100%;
width: 100%;
}
#header-title {
text-align: center;
}
#calendar {
width: 400px;
height: 620px;
margin-top: 70px;
}
#events {
position: absolute;
top: 80px;
left: 100px;
width: 800px;
height: 620px;
}
.event {
box-shadow: 0 0 20px black;
border-radius: 5px;
}
.hr-block {
border-top: 2px solid black;
height: 58px;
margin: 0;
padding: 0;
margin-left: 100px;
min-width: 360px;
opacity: .5;
}
.hr-header {
position: relative;
top: -33px;
left: -68px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script charset="UTF-8" src="js/moment.js"></script>
<script charset="UTF-8" src="js/script2.js"></script>
<title>Thought Machine Code Challenge</title>
</head>
<body>
<div id="container">
<div class="header">
<h1 id="header-title"></h1>
</div>
<div id="calendar">
<div class="hr-block">
<h2 class="hr-header">09:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">10:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">11:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">12:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">13:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">14:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">15:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">16:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">17:00</h2>
</div>
<div class="hr-block">
<h2 class="hr-header">18:00</h2>
</div>
</div>
</div>
<div id="events">
</div>
<script>
document.getElementById("header-title").innerHTML = moment().calendar();
</script>
</body>
</html>关于javascript - 检查两个或多个 DOM 元素是否重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36764452/