title: How to build external events list from the loaded JSON file?
body: <p>I have no problem loading data from JSON file to my Fullcalendar, however I want all my data to appear only on the external list of draggable / droppable events and then the user would decide where to drag events (<a href="http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html" rel="nofollow">example</a>)</p>
  
  <p>I did achieve loading data to the external list divs. It is displayed correctly, but when I drag the event to the calendar the title disappears. How can I avoid losing data?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;script&gt;
  $(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();
              }
  
          }
      });
  
  });
  </code></pre>
  
  <p></p>
  
  <p>divs in body:</p>
  
  <pre><code>&lt;div id='wrap'&gt;
  &lt;div id='external-events' style="display: none;"&gt;
  &lt;h4&gt;Draggable Events&lt;/h4&gt;
  &lt;div class='external-event' id="mec1"&gt;&lt;/div&gt;
  &lt;div class='external-event' id="mec2"&gt;&lt;/div&gt;
  &lt;div class='external-event'&gt;My Event 3&lt;/div&gt;
  &lt;div class='external-event'&gt;My Event 4&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id='calendar'&gt;&lt;/div&gt;
  &lt;div style='clear:both'&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>You can see I've also tried loading JSON data with external JavaScript to div id "mec1" and div id "mec2". This was successful yet same situation. Title disappears after drag drop.</p>
  
  <p>If I drag these to div id='calendar' the title is not displayed anymore.</p>
  
  <p>My JSON file contains only this:</p>
  
  <pre><code>[
  {
      "title" : "Blue Monday",
      "allDay" : false 
  },
  {
      "title" : "John de John",
      "allDay" : false 
  },
  {
      "title" : "Pumukli Pista",
      "allDay" : false 
  } 
  ]
  </code></pre>
  
  <p>I hope I provided enough information. Thank you in advance for any help on this. </p>
  
  <p>I'm very new to fullcalendar and strong basic with jQuery, js. 
  I've tried to solve the problem <a href="http://arshaw.com/fullcalendar/docs/dropping/droppable/" rel="nofollow">from here</a></p>