Создать «перетаскивающий» элемент синтетически - PullRequest
Новая
       6

Создать «перетаскивающий» элемент синтетически

0 голосов
/ 06 февраля 2020

Я хочу использовать HTML5 Drag and Drop API для достижения некоторых функций перетаскивания в моем приложении.

Я также использую FullCalendar, который, к сожалению, 1006 * не использует API перетаскивания и скорее всего использует только щелчок мыши и события перемещения. И в то же время - поскольку кнопка мыши все еще нажата, события наведения мыши блокируются.

По сути, я пытаюсь перетащить события календаря во внешний источник.

Таким образом, мой план обхода будет таким:

  1. Пусть FullCalendar продолжит использовать свои собственные методы для выполнения событий перетаскивания в календаре.
  2. В то же время в методе eventDragStart синтетически создайте элемент и создайте «перетаскивающие» события, которые могут быть обнаружены как dragover событиями внешнего элемента.

Есть какие-нибудь предложения о том, как мне этого добиться или иным образом предотвратить блокировку события наведения мыши?

Вот пример кода, обратите внимание, что при перетаскивании розового прямоугольника срабатывает событие перетаскивания, а при перетаскивании события календаря - нет. 

document.addEventListener("DOMContentLoaded", function() {
  const dragEl = document.getElementById("dropzone");
  dragEl.addEventListener("dragenter", () => {
    dragEl.textContent = "dragenter";
  });
  dragEl.addEventListener("dragleave", () => {
    dragEl.textContent = " I'm the drop zone";
  });
  dragEl.addEventListener("mouseenter", () => {
    dragEl.textContent = "mouseenter";
  });
  dragEl.addEventListener("mouseleave", () => {
    dragEl.textContent = " I'm the drop zone";
  });
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid', 'interaction'],
    editable: true,
    events: [{
      title: 'event1',
      start: new Date(Date.now()).toISOString(),
      end: new Date(Date.now() + 60 * 60).toISOString(),
    }, ],

    eventDragStart: (info) => {
        //Create synthetic event here? 
    },

    eventRender: (info) => {
        //I've tried manually adding 'draggable' attribute, doesn't work. 
    }

  });

  calendar.render();
});
#dropzone {
  border: solid 3px red;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 50px;
}

#draggable {
  border: solid 3px blue;
  width: 50px;
  height: 50px;
  display: inline-block;
  user-select: none;
}

#html5draggable {
  border: solid 3px pink;
  width: 50px;
  height: 50px;
  display: inline-block;
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>

<div id="dropzone">
  I'm the drop zone
</div>

<div id="html5draggable" draggable="true">
  I'm an HTML5 draggable
</div>

<div id="calendar">

  <div>
...