我正在建立日程表。我希望活动跨越多个小时,具体取决于它们的持续时间。这些事件应该是可拖动的。 但是,由于在我的模型中,该事件是某个特定日期/小时的父div的子项,因此拖动仅在鼠标位于该特定div上方时有效。
我的小提琴:https://jsfiddle.net/melojami/qwb6n7yc/ 注意:实际拖动在这里不起作用,但这不是问题。它在我的原始代码中正常工作
我的问题是:
使用这些技术是否有可能实现我想要的功能? 还是我应该考虑一种完全不同的方法?
.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>