重叠div仅可部分拖动

时间:2018-09-07 14:27:57

标签: html twitter-bootstrap overlay draggable

我正在建立日程表。我希望活动跨越多个小时,具体取决于它们的持续时间。这些事件应该是可拖动的。 但是,由于在我的模型中,该事件是某个特定日期/小时的父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>

0 个答案:

没有答案