动态全日历外部可拖动更改事件数据

Question

我正在使用全日历。

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

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

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

这按预期工作。然后，我想更改Javascript中的事件数据，以便同一可拖动对象现在将创建不同的事件标题。

如果我创建另一个具有相同名称的可拖动对象，则原始事件数据和新数据并排出现在日历上。如何删除或修改原始事件数据？

Answer 1

为此，您可以利用以下事实：as per the documentation eventData属性可以接受一个函数，每次将Draggable拖动到日历上以获取事件数据时，该函数都会动态调用。

在此示例中，我将其设置为检索附加到其的HTML元素的innerText，但是出于您的目的，您可以将其设置为动态检索item.name。然后，我添加了一行代码，用于在“放置”事件之后更新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";
}

演示：https://codepen.io/ADyson82/pen/abbGaML?editors=1010

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