Как скопировать событие перетаскивания?

Question

Я обновляю свое приложение новой версией fullcalendar , и я хотел бы копировать / вставлять события, которые я перетаскиваю.

Я установил для редактируемой опции значение true вмой объект планирования и перетаскивание работают, но я бы хотел, чтобы оно копировало событие, а не смещало его.

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

var jsonEvents = <?php echo json_encode($arrayEvenements); ?>;
var planning = {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
    defaultView: 'timeGridWeek',
    allDaySlot: false,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    editable: true,
    events : jsonEvents,
    eventClick : function goTo(info){
      // Some link to my event page
    },
    eventDragStart : function cloneEvent(info) {
      // Where I want the magic to happen I guess ???
        var evenement = info.event;
        console.log(evenement);
    },
    eventDragStop : function upadateEvent(info) {
        var evenement = info.event;
        console.log(info)
    }
}

var calendarEl = $('#calendar1')[0]
var calendar = new FullCalendar.Calendar(calendarEl, planning)
calendar.render()

Мне нужен клон моего события перетаскивания. У меня есть одно событие перетаскивания, которое я перемещаю без причины

Answer 1

Для клонирования события, я считаю, что уже слишком поздно пытаться что-либо сделать в eventDragStart, событие уже начало двигаться в этой точке.

Если вас не беспокоит то, что события перетаскиваются и изменяются в размере, и хотите толькоЧтобы клонировать событие при перетаскивании, решение довольно простое.Просто рассматривайте каждое событие как внешнее событие.При таком подходе редактируемые значения не должны быть истинными.

let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");

new Draggable(containerEl, {
  itemSelector: ".fc-event",
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

var calendar = new Calendar(calendarEl, {
  plugins: ["dayGrid", "interaction"],
  defaultView: "dayGridMonth",
  events: [
    {
      title: "Test 1",
      start: "2019-04-01"
    },
    {
      title: "Test 2",
      start: "2019-04-03",
      end: "2019-04-05"
    },
    {
      title: "Test 3",
      start: "2019-04-22",
      end: "2019-04-25"
    },
    {
      title: "Test 4",
      start: "2019-04-19"
    }
  ]
});

calendar.render();

Рабочий пример

Если, однако, вам нужно иметь возможность перетаскивать и изменять размеры событий, вам нужны некоторыеспособ различения обычного перетаскивания и внешнего перетаскивания.В v3 я использовал для копирования событий, когда клавиша управления была нажата, и пользователь начал перетаскивать.В v4, похоже, есть проблема с этим, я планирую разобраться в этом подробнее, но пока у меня есть рабочий пример при удерживании клавиши Shift.

Если вы перетаскиваете без удержания Shift, событие перемещается, если вы перетаскиваете, удерживая Shift, событие клонируется.

let shiftIsPressed = false;

function setEventsCopyable(isCopyable) {
  shiftIsPressed = !shiftIsPressed;
  calendar.setOption("droppable", isCopyable);
  calendar.setOption("editable", !isCopyable);
}

document.addEventListener("keydown", event => {
  if (event.keyCode === 16 && !shiftIsPressed) {
    setEventsCopyable(true);
  }
});

document.addEventListener("keyup", event => {
  if (shiftIsPressed) {
    setEventsCopyable(false);
  }
});

let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");

new Draggable(containerEl, {
  itemSelector: ".fc-event",
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

var calendar = new Calendar(calendarEl, {
  plugins: ["dayGrid", "interaction"],
  defaultView: "dayGridMonth",
  // Determines whether the events on the calendar can be modified.
  editable: true,
  // Determines if external draggable elements can be dropped onto the calendar.
  dropAccept(el) {
    return shiftIsPressed;
  },
  events: [
    {
      title: "Test 1",
      start: "2019-04-01"
    },
    {
      title: "Test 2",
      start: "2019-04-03",
      end: "2019-04-05"
    },
    {
      title: "Test 3",
      start: "2019-04-22",
      end: "2019-04-25"
    },
    {
      title: "Test 4",
      start: "2019-04-19"
    }
  ]
});

calendar.render();

Рабочий пример