javascript - 如何复制拖放事件？

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()

我想要一个拖放事件的克隆 我有一个拖放事件 我无缘无故地四处移动

标签： javascriptdrag-and-dropfullcalendardraggable

Answer 1

对于克隆事件，我认为尝试在 eventDragStart 中执行任何操作都为时已晚，此时事件已经开始移动。

如果您不担心事件被拖动和调整大小，并且只想在拖动时克隆事件，那么解决方案非常简单。只需将每个事件视为外部事件。使用这种方法，editable 不应该是真的。

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();

工作示例