php - FullCalendar - 通过 AJAX 在 div 中动态加载外部事件

Question

我对这个有点陌生。

我正在尝试通过 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 确实有类)。

Answer 1

将 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 几乎相同，因此不清楚为什么它不适合您，除非您的代码中的其他地方有其他错误/缺失。