Fullcalendar Scheduler - 外部拖放不会从 HTML 交付 data-event

Question

我正在使用 FullCalendar 的调度程序并想进行外部拖放 - 但我尝试从 HTML 获取一些数据的所有操作都没有用。

例如，我想用我自己的事件 ID 覆盖生成的事件 ID，以便在 PHP 中将其与实体匹配并创建一个与之相关的新 object。

我遵循了 drop 的每条指令，以及 eventReceive 和必须存在的属性。无论如何，它都无法通过 data-event='{"id":"XYZ"}' 和 data-event='1' data-id='XYZ' 可拖动 HTML-Element.

<label class="label-primary form-control draggable draggable-event" data-event="{'id':'XYZ'}">XYZ-Title</label>

在我的 JS 事件中我确实得到了事件 object，但是在这个 object 中我找不到我设置为 HTML-Object 的任何数据。没有 ID、没有标题、没有颜色 - 唯一有效的是事件的持续时间。

eventReceive: function(event) { // called when a proper external event is dropped
    console.debug('eventReceive', event);
},

那么，我如何设置这些详细信息 - 以及如何让它们通过回调将它们（稍后）通过 ajax 发送到 PHP。这个问题不是关于 AJAX-Calls - 只是关于如何获取数据。

你能帮我从可拖动事件中获取这些信息吗？太棒了！

感谢您的帮助。

Answer 1

感谢您的回复！我仔细检查了有效的 json 字符串以使其正常工作，并查看了另一个问题（这是中途重复的问题）。首先，我的 JSON 是错误的，但这是我在创建 post 之前尝试过的事情之一（使用不同的语法）。最后我在教程中使用的 "simple" 代码中找到了问题，但不符合我的要求 - 但我首先没有意识到这是我的问题。

// code from tutorial / example
$('#external-events .fc-event').each(function() {

    // store data so the calendar knows to render an event upon drop
    $(this).data('event', { // HERE: overwrites the data object ==>
        title: $.trim($(this).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });

});

最后是数据部分，它覆盖了完整的对象，交付。我将行更改为扩展以设置默认值，但也从 html:

获取对象

// edited code
$('#external-events .fc-event').each(function() {

    // get the complete object data from html
    var eventData = $(this).data('event');

    // extend this object with the settings you want to make
    $.extend(eventData, {
        stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // store data so the calendar knows to render an event upon drop
    $(this).data('event', eventData);

    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });

});

非常感谢您的帮助，这个问题已经解决了！ :)

Fullcalendar Scheduler - 外部拖放不会从 HTML 交付 data-event

Fullcalendar Scheduler - External Drag and Drop doesn't deliver data-event from HTML

jquery

scheduler

fullcalendar