1

我正在使用全日历。

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

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

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

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

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

4

1 回答 1

0

为此，您可以利用这样一个事实，即根据文档，该 eventData属性可以接受一个函数，然后每次将 Draggable 拖到日历上时都会动态调用该函数以获取事件数据。

在此示例中，我已将其设置为检索innerText它所附加的 HTML 元素，但出于您的目的，您可以将其设置为item.name动态检索。然后我添加了一行代码来更新innerText“drop”事件之后的事件，以便下次拖动它时，它将使用该新文本作为事件标题。不过，您可能还有其他一些更改标题的触发器，但问题并不完全清楚。

设置可拖动：

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

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

于 2019-11-07T16:53:05.813 回答