爲什麼jQuery克隆製作事件不能拖放到日曆上？ fullcalendar

Question

我已經在我的FullCalendar實現中爲外部事件添加了另一個div，並且想法是如果用戶希望（爲了直觀地說明這個想法 - >http://imgur.com/a/qZbWj），將該div存儲爲以後使用。即時通訊能夠成功地拖放從第一個div事件到第二，我也能夠從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）和克隆（true，true），但這也沒有幫助。

小提琴：http://jsfiddle.net/a3q9c5tr/37

仍然需要與此:(

Answer 1

我找到了問題的解決方案。 jQuery的克隆（）函數不會複製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); 
    } 
}); 

$('#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？

如果是這樣，您可能需要在調用draggable函數之前將其附加到DOM的正確位置。嘗試像這樣：

$('#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 
     }); 
    } 
});