Перекрывающийся div только частично перетаскиваемый - PullRequest
Новая
       15

Перекрывающийся div только частично перетаскиваемый

0 голосов
/ 07 сентября 2018

Я строю календарь расписания. Я хочу, чтобы события длились несколько часов в зависимости от их продолжительности. События должны быть перетаскиваемыми. Однако, поскольку в моей модели событие является дочерним по отношению к определенному родительскому элементу 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>
...