Почему jQuery clone делает события не перетаскиваемыми в календарь? fullcalendar

Question

Я добавил еще один div для внешних событий в моей реализации FullCalendar, и идея состоит в том, чтобы этот div сохранял избранное для последующего использования, если пользователь хочет (визуально проиллюстрировать идею ->http://imgur.com/a/qZbWj). Им успешно возможность перетаскивать события с первого дел до второй, и я также смог перетащить их из div2, но НЕ на календарь по некоторым причинам:

// 2nd div droppable setting 
$('#external-events-fav').droppable({ 
     accept: '#external-events .fc-event', 
     drop: function (event, ui) { 
      var droppable = $(this); 
      var clone = ui.draggable.clone(); 
      clone.draggable({ // clone element then make it draggable 
       helper: 'clone', 
       appendTo: 'body', 
       scroll: false, 
       zIndex: 999, 
       revert: true,  // will cause the event to go back to its 
       revertDuration: 0 
      }).appendTo(droppable); 
     } 
    }); 

Если я не сделать пользовательский интерфейс .draggable.clone(), я могу перетащить событие из нового div в календарь, но я хочу сделать клон, поэтому я могу показать событие в обоих div. Создание клона с использованием jQuery clone() делает его недоступным для календаря, но по неизвестным причинам. Кто-нибудь знает, почему? Я пробовал клонировать (true) и clone (true, true), но это тоже не помогло.

скрипку: http://jsfiddle.net/a3q9c5tr/37

все еще нужна помощь с этим :(

Answer 1

Я нашел решение проблемы. Функция jquery clone() не копирует атрибуты данных, установленные данными jQuery (функция «event», {}), поэтому мне пришлось сделать это снова для клона, чтобы он работал, поэтому:

$('#external-events-fav').droppable({ 
    accept: '#external-events .fc-event', 
    drop: function (event, ui) { 
     var droppable = $(this); 
     var clone = ui.draggable.clone(); 
     clone.data('event' { 
      title : ui.draggable.attr("name"), 
      // INSERT MORE ATTR HERE 
     }); 
     clone.data('duration',ui.draggable.attr('duration')); 
     clone.draggable({ // clone element then make it draggable 
      helper: 'clone', 
      appendTo: 'body', 
      scroll: false, 
      zIndex: 999, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0 
     }).appendTo(droppable); 
    } 
}); 

Надеюсь, это может помочь кому угодно;)

Answer 2

В соответствии с вашими комментариями я предполагаю, что ваше описание проблемы заключается в следующем:

Клонированный объект перетаскиваемым (вы можете нажмите и перетащите его по своей странице ), но не отбрасывайте его в календарь (когда вы поднимаете палец по календарю, объект возвращается в исходное положение или просто не записывается как падение PED).

Если это так, мое первое предположение это, что клонированный объект не соответствует селектору droppableaccept. Является ли ваш клонированный объект внутри #external-events и имеет ли он класс fc-event?

Если это так, вы, вероятно, должны добавить его в нужное место DOM перед вызовом функции draggable. Попробуйте следующее:

$('#external-events-fav').droppable({ 
    accept: '#external-events .fc-event', 
    drop: function (event, ui) { 
     var clone = ui.draggable.clone(); 
     clone.appendTo(this); 
     clone.draggable({ // clone element then make it draggable 
      helper: 'clone', 
      scroll: false, 
      zIndex: 999, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0 
     }); 
    } 
});