动态创建的外部事件不可拖动

我现在正在研究一个多星期，但是我不能将我的JSON值从Arshaw拖到外部可拖动的div到Fullcalendar。

感谢一些帮助，我将我的json数据加载到外部div。 所有看起来都是正确的，但是在使用’external-events’类将动态创建的div附加到div后，我的事件不再可拖动了。

如果我将.draggable()添加到我新创建的div到具有'.external-event'类的div，它会变得可拖动但我不能正确地将它们放到我的日历中。 具有标题值的不可拖动的新div将显示在新的空白可拖动div下。 太烦人了。

在我的index.html中：

  $(document).ready(function() { /* initialize the external events -----------------------------------------------------------------*/ $('#external-events div.external-event').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // 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 }); }); /* initialize the calendar -----------------------------------------------------------------*/ $('#calendar').fullCalendar({ header: { left: 'prevYear,nextYear prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, events: 'json/example.json', eventRender: function (event, element) {element.find('.fc-event-title').html(event.id);}, eventClick: function(event) { if (event.url) { window.open(event.url); return false; } }, editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! drop: function(date, allDay) { // this function is called when something is dropped // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } } }); });   body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #wrap { width: 1100px; margin: 0 auto; } #external-events { float: left; width: 150px; padding: 0 10px; border: 1px solid #ccc; background: #eee; text-align: left; } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; padding: 2px 4px; background: #3366CC; color: #fff; font-size: .85em; cursor: pointer; } #external-events p { margin: 1.5em 0; font-size: 11px; color: #666; } #external-events p input { margin: 0; vertical-align: middle; } #calendar { float: right; width: 900px; }    
 
  
Workes list
 
John the first
 
Mark the second
 
Mecanic Test  

我使用myscript.js来获取JSON值并创建div。

 window.onload = function () { var html=''; $.getJSON('trax4t/json/example.json', function(info){ for (var numero = 0;numero < info.length;numero++) { var eventObjectFromDB = info[numero]; var eventToExternalEvents = {"title":eventObjectFromDB.title, "id":eventObjectFromDB.id, "start":eventObjectFromDB.start, "end":eventObjectFromDB.end, "allDay":eventObjectFromDB.allDay}; $('#external-events').append("
"+ eventToExternalEvents.title +"
"); $('.external-event').addClass('fc-event-draggable'); }; }); }; 

您可以看到这是具有外部事件列表的典型Fullcalendar。

我现在很累。 我希望事情不要乱。 我的代码有更多/ … /部分然后是实际代码。 我真的很努力。 谁能告诉我，我在这里失踪了什么？

我希望这是足够的信息，但如果有必要，我会添加更多信息。 非常感谢你提前！

Answer 1

这是我第一次回答我自己的问题，但是对于那些不熟悉fullcalendar的人来说这可能是有用的，它可能仍然需要更正，以确保有更好的解决方案。

在外部myscript.js中，我重复了index.html的以下部分：

 window.onload = function () { $.getJSON('json/example.json', function(info){ for (var numero = 0;numero < info.length;numero++) { var eventObjectFromDB = info[numero]; var eventToExternalEvents = {"title":eventObjectFromDB.title, "id":eventObjectFromDB.id, "start":eventObjectFromDB.start, "end":eventObjectFromDB.end, "allDay":eventObjectFromDB.allDay, "editable":true}; $('#external-events').append("
"+ eventToExternalEvents.title +"
"); var eventObject2 = { title: $.trim(eventToExternalEvents.title) // use the element's text as the event title }; $('#mec'+numero).data('eventObject', eventObject2); alert('#mec'+numero+''); $('.external-event').draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 }); $('#calendar').fullCalendar( 'refetchEvents' ); } }); 

这现在有效。 Fullcalendar将为每个活动返回正确的标题。 我为for循环中的每个事件使用单独的id，但我可能会更改从JSON文件加载的id。 这由您自行决定。

Answer 2

 function externalevents() { $('#external-events .fc-event').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // 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 }); }); }