html5 元素重叠,javascript – 检查两个或多个DOM元素是否重叠

在查看代码之后,当您从开始和结束时间开始处理时,检查渲染的元素是否过于复杂似乎过于复杂.

我这样做的方法是将碰撞在数组中的事件分组,如下所示：

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 = $(`

`).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 = $("

").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;

}

Thought Machine Code Challenge

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

18:00

document.getElementById("header-title").innerHTML = moment().calendar();