为什么 jQuery 克隆使事件不能拖到日历上？全日历答案

【问题标题】：Why is jQuery clone making events not draggable onto calendar? fullcalendar为什么 jQuery 克隆使事件不能拖到日历上？全日历
【发布时间】：2016-12-27 10:18:05
【问题描述】：

我在我的 FullCalendar 实现中为外部事件添加了另一个 div，我的想法是让这个 div 存储收藏夹以供用户希望以后使用（以直观地说明这个想法 --> http://imgur.com/a/qZbWj）。我成功地将事件从第一个 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); 
        }
    });

如果我不进行 ui.draggable.clone() 调用，我可以将事件从新 div 拖到日历中，但我想进行克隆，这样我可以让事件出现在两个div。使用 jQuery clone() 创建克隆使其无法拖到日历上，但原因不明。有谁知道为什么？我已经尝试过 clone(true) 和 clone(true,true) 但这也无济于事。

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

在这方面仍然需要帮助:(

【问题讨论】：

将undraggable 或undroppable 列入日历？
ui.draggable是一个函数，那为什么.clone()？
我不能把它放到日历上，如果我调用 .clone() 就不会粘住
在制作此代码时受到“stackoverflow.com/questions/32711222/…”的高度启发
克隆的对象是否匹配选择器#external-events .fc-event？它在#external-events 里面并且有fc-event 类吗？如果不是，那可能就是问题的根源。

标签： javascript jquery fullcalendar clone

【解决方案1】：

根据您的 cmets，我假设您的问题描述如下：

克隆的对象是可拖动的（您可以单击并将其拖动到您的页面）但不能拖放到日历上（当您抬起手指时）在日历上，对象会回到其原始位置，或者根本不会记录为丢弃）。

如果是这样，我首先猜测克隆的对象与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
        });  
    }
});

【讨论】：

您发布的问题描述是正确的，是的，当我尝试将其放到日历上时，它会回到原始位置。当我将元素从 div1 拖动到 div2 时创建副本，因此它位于“external-events-fav”内。您的克隆对象是否在#external-events 中？没有。它有 fc-event 类吗？是 console.log on console 给出：div#10817.fc-event.ui-draggable.ui-draggable-handle
控制台上的console.log = 克隆上的console.log **
如果您的克隆对象不在#external-events 中，那么它将与accept 属性不匹配，并且不能拖放到#external-events-fav 上。如果您改用accept: '.fc-event' 会怎样？这应该使您的克隆也可以丢弃。或者将克隆附加到#external-events。
我将接受属性更改为 '.fc-event' 并且我仍然能够将对象从 #external-events 拖动到 #external-events-fav 以及将 #external-events-fav 中的对象拖放到 #external-events-fav创建重复项（这很好但不是主要问题）。问题仍然存在，我无法将克隆拖放到日历上。
我不明白为什么日历会接受来自#external-events 的fc-event，但不接受位于#external-events-fav 中的相同克隆。对我来说毫无意义。

【解决方案2】：

我找到了问题的解决方案。 jQUery clone() 函数不会复制由 jQuery data('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); 
    }
});

希望这对任何人都有帮助；）

【讨论】：