动态创建的外部事件不可拖动答案

【问题标题】：Dynamically created external events not draggable动态创建的外部事件不可拖动
【发布时间】：2013-12-10 20:09:11
【问题描述】：

我现在研究了一个多星期，但我无法将我的 JSON 值拖动到外部可拖动 div 到 Arshaw 的 Fullcalendar。

感谢一些帮助，我将 json 数据加载到了外部 div。一切看起来都正确，但是在将动态创建的 div 附加到具有“外部事件”类的 div 之后，我的事件不再可拖动。

如果我将 .draggable() 添加到我新创建的 div 到具有 '.external-event' 类的 div 中，它会变得可拖动，但我无法将它们正确地拖放到我的日历中。具有标题值的不可拖动的新 div 将出现在新的空白可拖动 div 下。好烦啊。

在我的 index.html 中：

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

    }
});

});

</script>
<style>

    body {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }

    #wrap {
    width: 1100px;
    margin: 0 auto;
    }

    #external-events {
    float: left;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
    text-align: left;
    }

    #external-events h4 {
    font-size: 16px;
    margin-top: 0;
    padding-top: 1em;
    }

.external-event { /* try to mimick the look of a real event */
    margin: 10px 0;
    padding: 2px 4px;
    background: #3366CC;
    color: #fff;
    font-size: .85em;
    cursor: pointer;
    }

    #external-events p {
    margin: 1.5em 0;
    font-size: 11px;
    color: #666;
    }

    #external-events p input {
    margin: 0;
    vertical-align: middle;
    }

    #calendar {
    float: right;
    width: 900px;
    }

</style>
</head>
<body>

<div id='wrap'>
<div id='external-events' style="display: none;">
<img alt="web applications logo" src="tax4t.png">
<h4>Workes list</h4>
<div class='external-event'>John the first</div>
<div class='external-event'>Mark the second</div>
<div class='external-event'><button id="mecbtn" type="button">Mecanic Test</button>             </div>

我使用 myscript.js 获取 JSON 值并创建 div。

window.onload = function () { 
var html='';
$.getJSON('trax4t/json/example.json', function(info){
for (var numero = 0;numero < info.length;numero++) {
        var eventObjectFromDB = info[numero];
        var eventToExternalEvents = {"title":eventObjectFromDB.title,
                                "id":eventObjectFromDB.id,
                                "start":eventObjectFromDB.start,
                                        "end":eventObjectFromDB.end,
                                        "allDay":eventObjectFromDB.allDay};
$('#external-events').append("<div class='external-event'>"+ eventToExternalEvents.title +"</div>");
$('.external-event').addClass('fc-event-draggable');
};
});
};

您可以看到这是一个带有外部事件列表的典型 Fullcalendar。

我现在很累。我希望事情不要乱七八糟。我的代码比实际代码有更多 /.../ 部分。我真的很努力。有人能告诉我我在这里想念什么吗？

我希望这是足够的信息，但如有必要，我会添加更多信息。非常感谢您！

【问题讨论】：

先生您好：P，您注意到了吗？ link...尝试为每个事件对象添加可编辑属性，如 "editable":true 并且您必须使用可拖动的 Jquery 插件和 jquery ui 核心来做到这一点。
我已经添加到 'var eventToExternalEvents' "editable":true 中，然后创建了 '$('external-event').draggable();'。但是没有区别:(也许我将它添加到错误的地方。

标签： jquery json fullcalendar jquery-ui-draggable

【解决方案1】：

这是我第一次回答我自己的问题，但它可能对不熟悉 fullcalendar 的其他人有用，并且可能仍需要更正，因为肯定有更好的解决方案。

在外部 myscript.js 中，我重复了 index.html 的以下部分：

window.onload = function () { 
$.getJSON('json/example.json', function(info){
   for (var numero = 0;numero < info.length;numero++) {
            var eventObjectFromDB = info[numero];
            var eventToExternalEvents =                      
                                           {"title":eventObjectFromDB.title,
                                "id":eventObjectFromDB.id,
                                "start":eventObjectFromDB.start,
                                        "end":eventObjectFromDB.end,
                                        "allDay":eventObjectFromDB.allDay,
                    "editable":true};

   $('#external-events').append("<div class='external-event' id='mec"+numero+"'>"+ eventToExternalEvents.title +"</div>");
            var eventObject2 = {
                title: $.trim(eventToExternalEvents.title) // use the element's text as the event title
            };
            $('#mec'+numero).data('eventObject', eventObject2);
            alert('#mec'+numero+'');
            $('.external-event').draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  });
            $('#calendar').fullCalendar( 'refetchEvents' );
        }
    });

现在可以了。 Fullcalendar 将为每个事件返回正确的标题。我为 for 循环中的每个事件使用单独的 id，但可能我会为从 JSON 文件加载的 id 更改它。这由您自行决定。

【讨论】：

【解决方案2】：

function externalevents() {
    $('#external-events .fc-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
        });
    });
}

【讨论】：