动态创建的外部事件不可拖动 [英] Dynamically created external events not draggable
问题描述
我现在正在研究一个多星期，但我无法将我的JSON值从外部可拖动div移到Arshaw的Fullcalendar。
感谢一些帮助我把我的json数据加载到外部div。所有看起来都是正确的，但是在通过'external-events'类将动态创建的div附加到div之后，我的事件不再可拖动了。
如果我添加 .draggable（）给新创建的div使用'。external-event' class它可以拖动，但是我不能拖放他们正确地对我的日历。具有标题值的不可拖动的新div将显示在新的空白可拖动div下。这是非常烦人的。
在我的index.html中：
<脚本>
$（document）.ready（function（）{
/ *初始化外部事件
------------- -------------------------------------------------- - * /
$（'＃external-events div.external-event'）。each（function（）{
//创建一个Event对象（http： //arshaw.com/fullcalendar/docs/event_data/Event_Object/）
//它不需要开始或结束
var eventObject = {
title：$ .trim（ $（this）.text（））//使用元素的文本作为事件标题
};
//将事件对象存储在DOM元素中，以便稍后可以使用它
$（this）.data（'eventObject'，eventObject）;
//使用jQuery UI使事件可拖动
$（this）.draggable（{
zIndex：999，
revert：true，//将导致事件返回到它的
revertDuration：0 //在拖动
}之后的原始位置）;
}）;
/ *初始化日历
------------------------------------------------ ----------------- * /
$（'＃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）;
返回false;
}
}，
可编辑：true，
droppable：true，//这样可以将东西放到日历上！
drop：function（date，allDay）{//当某些东西被删除时调用这个函数
//检索被删除元素存储的事件对象
var originalEventObject = $（this ）。数据（ '的EventObject'）;
//我们需要复制它，以便多个事件不会引用同一个对象
var copiedEventObject = $ .extend（{}，originalEventObject）;
//指定报告的日期
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
//在日历上呈现事件
//最后的`true`参数确定事件是否粘住（http://arshaw.com/fullcalendar/docs/event_rendering/ renderEvent /）
$（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）;
//是否勾选删除后删除复选框？
if（$（'＃drop-remove'）。is（'：checked'））{
//如果是，从Draggable Events列表中删除元素
$（此）卸下摆臂（）;
}
}
}）;
}）;
< / 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;
背景：#eee;
text-align：left;
}
＃external-events h4 {
font-size：16px;
margin-top：0;
padding-top：1em;
}
.external-event {/ *尝试模仿真实事件的外观* /
margin：10px 0;
padding：2px 4px;
背景：＃3366CC;
颜色：#fff;
font-size：.85em;
光标：指针;
}
＃external-events p {
margin：1.5em 0;
font-size：11px;
颜色：＃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 logosrc =tax4t.png>
< h4>工作清单< / h4>
< div class ='external-event'> John the first< / div>
< div class ='external-event'>标记第二个< / div>
< div class ='external-event'>< button id =mecbtntype =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。
现在我已经很累了。我希望事情不要混乱。我的代码有更多/.../部分，然后是实际代码。我努力尝试。有人能告诉我我在这里错过了什么吗？
我希望这是足够的信息，但如果需要，我会添加更多信息。提前感谢你！
这是我第一次回答自己的问题，但对于那些刚刚接触fullcalendar的人来说，可能仍然需要更正，以确保有更好的解决方案。
在外部myscript.js中，我重复了index.html的以下部分：
pre $
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.a llDay，
editable：true};
$（'＃external-events'）。append（< div class ='external-event'id ='mec+ numero +'>+ eventToExternalEvents.title +< ; / DIV>中）;
var eventObject2 = {
title：$ .trim（eventToExternalEvents.title）//使用元素的文本作为事件标题
};
$（'＃mec'+ numero）.data（'eventObject'，eventObject2）;
alert（'＃mec'+ numero +''）;
$（'。external-event'）。draggable（{
zIndex：999，
revert：true，//将导致事件返回到
revertDuration： 0}）;
$（'＃calendar'）。fullCalendar（'refetchEvents'）;
}
}）;
现在可以使用。 Fullcalendar将为每个事件返回正确的标题。我使用for循环中的每个事件的个人ID，但可能我会改变从JSON文件加载的ID。这是你自己决定的。
I'm researching now for over a week and yet I can't drag my JSON value to external draggable divs to a Fullcalendar from Arshaw.
Thanks to some help I have my json data loaded to the external divs. All looks correct, however after appending dynamically created divs to the div with 'external-events' class my events are not draggable anymore.
If I add .draggable() to my newly created divs to the divs with '.external-event' class it becomes draggable but I can't drop them correctly to my calendar. A not draggable new div with the title value will appear under a new blank draggable div. It is so annoying.
in my 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>
I use a myscript.js to get JSON values and create divs.
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');
};
});
};
You can see this is a typical Fullcalendar with external events list.
I'm very tired by now. I hope things are not to messy. My code has more /.../ parts then actual code. I try really hard. Can someone tell me what am I missing here?
I hope this is enough information, but I add more if necessary. Thank you so much in advance!
This is the first time I answer my own question, but it can be useful to others who are new to fullcalendar and it may still need corrections as for sure there are better solutions to this.
In an external myscript.js I repeated the following part of the 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' );
}
});
This now works. Fullcalendar will return the right title for each event. I use individual id's for each event from the for loop but probably I will change that for the id loaded from the JSON file. This is at your discretion.
这篇关于动态创建的外部事件不可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
