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

【问题标题】：FullCalendar - external events dynamic load in div via AJAXFullCalendar - 通过 AJAX 在 div 中动态加载外部事件
【发布时间】：2020-01-08 15:21:11
【问题描述】：

我对此有点陌生。

我正在尝试通过 ajax 从数据库加载外部事件。但是我遇到了 fc-events 类的可拖动属性的问题。

这是外部事件的 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
        });

还有来自 DB 的电话

<?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# 会出现分离但不保持可拖动属性。（在浏览器调试器中检查，为每个 id 创建的 div 确实具有类）。

【问题讨论】：

为什么不把margins加到你要分离的div上？

标签： php jquery html css fullcalendar

【解决方案1】：

将class="fc-event" 放在sesiones div 上毫无意义。应该是可拖动的单个事件 div，而不是外部 div。如果您将该类放在外部 div 上而不是内部 div 上，那么您最终不会像您所指出的那样将事件分开，但更重要的是它不起作用 - 您最终会得到一个由所有你的事件作为一个。显然这不是你想要的。问题演示：https://codepen.io/ADyson82/pen/KKwQEJm

但是，如果您从外部 div 中删除“fc-event”并将其按预期放置在内部 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 几乎相同，因此不清楚为什么它不适合您，除非您的代码中的其他地方有其他错误/缺失。

【讨论】：