如何复制拖放事件？

Question

我使用新版本的fullcalendar更新我的应用程序，我想复制/粘贴我拖放的事件。

我在计划对象中将editable选项设置为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();

Working example

但是，如果您需要能够拖动和调整事件大小，则需要某种方法来区分常规拖动和外部拖动。在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();

Working example