Javascript Fullcalendar外部可动态拖动更改事件数据

我正在使用fullcalendar

我创建了一个可拖放到日历上的外部文件

let singleslot = document.getElementById('singleslot');

 new Draggable(singleslot, {
  eventData: {
    title: item.name,
    duration: '00:45'
  }
});

这正如预期的那样有效。然后我想更改Javascript中的事件数据，以便相同的DragTable现在可以创建不同的事件标题

---

如果我创建了另一个同名的DragTable，则原始事件数据和新数据会同时出现在日历上。如何删除或修改原始事件数据？

要执行此操作，您可以利用

eventData

property可以接受一个函数，每次将Draggable拖到日历上以获取事件数据时，都会动态调用该函数

在本例中，我将其设置为检索它所附加到的HTML元素的

innerText

，但出于您的目的，您可以将其设置为动态检索

item.name

。然后，我添加了一行代码，在“drop”事件之后更新

innerText

，以便下次拖动它时，它将使用该新文本作为事件标题。你可能会有一些其他的触发因素来改变标题，但问题并不完全清楚

设置可拖动对象：

let singleslot = document.getElementById("singleslot");

new Draggable(singleslot, {
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText,
      duration: "00:45"
    };
  }
});

并添加代码以更新元素的文本：

drop: function(info) {
  singleslot.innerText = "ABC";
}

演示：

---

显然，这是过于简单的，因为它只进行了一次更改，但希望您能理解，使用您选择的任何方式动态设置可拖动的事件数据相对简单。

要做到这一点，您可以利用以下事实：

eventData

property可以接受一个函数，每次将Draggable拖到日历上以获取事件数据时，都会动态调用该函数

在本例中，我将其设置为检索它所附加到的HTML元素的

innerText

，但出于您的目的，您可以将其设置为动态检索

item.name

。然后，我添加了一行代码，在“drop”事件之后更新

innerText

，以便下次拖动它时，它将使用该新文本作为事件标题。你可能会有一些其他的触发因素来改变标题，但问题并不完全清楚

设置可拖动对象：

let singleslot = document.getElementById("singleslot");

new Draggable(singleslot, {
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText,
      duration: "00:45"
    };
  }
});

并添加代码以更新元素的文本：

drop: function(info) {
  singleslot.innerText = "ABC";
}

演示：

---

显然，这太简单了，因为它只进行了一次更改，但希望您能理解，使用您选择的任何方式动态设置可拖动设备的事件数据相对简单。

非常感谢您花时间向我解释这一点。工作如预期。非常感谢您花时间向我解释这一点。一切正常。