Fullcalendar 外部事件拖拽问题答案

【问题标题】：Fullcalendar external event dragg problemFullcalendar 外部事件拖拽问题
【发布时间】：2011-08-05 07:18:21
【问题描述】：

我正在使用全日历外部事件拖动。当我通过简单的代码（如示例代码中所写）创建那些外部事件（将被拖动）时，创建 id 为 external-event 的 div 其工作正常。

但问题是当我通过 jquery 代码创建这些外部事件，并将这些生成的事件 div 附加到外部事件 div 时。然后我无法拖动这些事件。

var dat;
$(document).ready(function() {


    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 
            { 
            tags: "cat", 
            tagmode: "any", 
            format: "json" 
            }, 
            function(data) { 
            dat=data;
            $.each(data.items, function(i,item){ 
            //generating the event dynamically.all event are creating but not draggable.
        $('#external-events').append("<div class='external-event'>ghgh</div>");

           }); 
    )};

HTML代码

 <div id='external-events'> <h4>Draggable Events</h4> <p> <input
 type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove
 after drop</label> </p> </div>

【问题讨论】：

你能发布你的代码吗？（也可以在这篇文章下面添加评论，这样我就知道你已经发布了你的代码！:)）
@Nicola 我已附上代码，请看一下。

标签： jquery fullcalendar

【解决方案1】：

我自己解决了这个问题，唯一的一点是，动态创建的 div 在这些事件被 jquery draggable 注册/biend 之后生成字母。我唯一需要做的是，我们需要将动态生成的 div 代码放在事件注册部分之前。

【讨论】：

在我尝试使用生成简单的动态 div 并注册它之后，它就可以工作了。

【解决方案2】：

$.each(data.items, function(i,item){ 
//generating the event dynamically.all event are creating but not draggable.
    $('#external-events').append("<div class='external-event'>ghgh</div>");
    $('#external-events div.external-event').draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the dra
    });
});

试试这个！它将使外部动态数据可拖动！ :)

【讨论】：