我对这个有点陌生。
我正在尝试通过 ajax 从数据库加载外部事件。但是我在使用 fc-events 类的 draggable 属性时遇到了问题。
这是外部事件的 html
<div id='external-events'>
<p></p>
<h4>Sesiones</h4>
<div class="fc-event" id="sesiones"></div>
</div>
用于调用的 Ajax
$(document).ready(function(){
$.ajax({
url:'http://localhost/eye/admin/ajax/mostrar_sesiones.php',
success: function(data){
$('#sesiones').html(data);
}
});
初始化外部事件
$('#external-events .fc-event').each(function() {
// 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
});
还有来自数据库的调用
<?php
session_start();
include_once('../../scripts/conexion.php');
$query = "SELECT Sesiones_ID, Sesion_nombre FROM sesiones";
if ($stmt = $con->prepare($query)) {
$stmt->execute();
$stmt->bind_result($Sesiones_ID, $Sesion_nombre);
$select="";
while ($stmt->fetch()) {
$select.="<div value=". $Sesiones_ID .">".$Sesion_nombre."</div>";
}
$stmt->close();
该图像显示了使用该代码时外部事件的样子。
它确实可以拖放。但问题是我需要将“Sesiones#”分开。如果我在 DB 文件的 div 中添加类,则 Sesiones#
看起来是分开的,但不保留 draggable 属性。 (在浏览器调试器中检查,为每个 id 创建的 div 确实有类)。
最佳答案
将 class="fc-event"
放在 sesiones
div 上是没有意义的。应该是可拖动的单个事件 div,而不是外部 div。如果您将该类放在外部 div 而不是内部 div 上,您最终会像您注意到的那样在事件之间没有分离,但更重要的是它不会起作用 - 您最终会得到一个包含 < em>所有您的事件作为一个。显然那不是你想要的。问题演示:https://codepen.io/ADyson82/pen/KKwQEJm
但是,如果您从外部 div 中删除“fc-event”并将其按预期放置在内部 div 上,那么每个 div 都会创建为一个单独的可拖动事件。这个
<div id='external-events'>
<p></p>
<h4>Sesiones</h4>
<div id="sesiones">
<div class="fc-event" value="1">One</div>
<div class="fc-event" value="2">Two</div>
<div class="fc-event" value="3">Three</div>
<div class="fc-event" value="4">Four</div>
</div>
</div>
是您应该创建的 HTML 结构。
像这样的一些 CSS 会在可拖动的 div 之间添加间距,并且当鼠标悬停在它们上面时也会使光标适本地改变:
#external-events .fc-event {
margin: 1em 0;
cursor: move;
}
工作演示(基于 official fullCalendar demo ):https://codepen.io/ADyson82/pen/MWYQxPE
这与您在上一个屏幕截图中显示的 HTML 几乎相同,因此不清楚为什么它不适合您,除非您的代码中的其他地方有其他错误/缺失。
关于php - FullCalendar - 通过 AJAX 在 div 中动态加载外部事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59648896/