重叠div仅可部分拖动

Question

我正在建立日程表。我希望活动跨越多个小时，具体取决于它们的持续时间。这些事件应该是可拖动的。 但是，由于在我的模型中，该事件是某个特定日期/小时的父div的子项，因此拖动仅在鼠标位于该特定div上方时有效。

我的小提琴：https://jsfiddle.net/melojami/qwb6n7yc/ 注意：实际拖动在这里不起作用，但这不是问题。它在我的原始代码中正常工作

我的问题是：

• 事件div是透明的
• 只能在父区域上拖动
• 仅在父区域上调整大小（在提琴中未实现）

使用这些技术是否有可能实现我想要的功能？ 还是我应该考虑一种完全不同的方法？

    .calendar-hour-div {
			height: 50px;
			width: 150px;
			border-top: 1px solid #cccccc;
			border-left: 1px solid #cccccc;
			padding: 0px 0px 0px 0px;
			position: relative;
			z-index: 1;
		}
		
		.calendar-task-div {
			width: 150px;
			border: 1px solid #333333;
			background-color: #dddddd;
			z-index: 2; 
			cursor: move;
			position: absolute;
      font-size: 11px;
      padding-top: 5px;
		}

<div class="container">
  <div class="row calendar-hour-row">
		<div class="col-1">9:00</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-1"></div>
	</div>
	<div class="row calendar-hour-row">
		<div class="col-1">10:00</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-1"></div>
	</div>
	<div class="row calendar-hour-row">
		<div class="col-1">11:00</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)">

				<div class="col-12 calendar-task-div" id="calendar_task_1" style="height: calc(50px * 2.5); top: 0px;" draggable="true" ondragstart="drag(event)">
					11:00 - 13:30<br>
					Do something<br>
				</div>

		</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-1"></div>
	</div>
	<div class="row calendar-hour-row">
		<div class="col-1">12:00</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-1"></div>
	</div>
	<div class="row calendar-hour-row">
		<div class="col-1">13:00</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-1"></div>
	</div>
	<div class="row calendar-hour-row">
		<div class="col-1">14:00</div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-2 calendar-hour-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div class="col-1"></div>
	</div>
</div>