FullCalendar - динамические внешние события c загрузка в div через AJAX

Question

Я вроде как новичок в этом.

Я пытаюсь загрузить внешние события из базы данных через ajax. Но у меня проблемы с атрибутом draggable из класса f c -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
        });

И вызов из БД

<?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 #». Если я go и добавлю класс в div в файле БД, то Sesiones# выглядит разделенным, но не поддерживает атрибут draggable. (проверено в отладчике браузера и div, созданный для каждого идентификатора, имеет класс).

Answer 1

Помещать class="fc-event" в sesiones div не имеет смысла. Должны быть перетаскиваемые отдельные события div, а не внешний div. Если вы поместите этот класс на внешний div, а не на внутренний, то в итоге у вас не будет разделения между событиями, как вы заметили, но, что более важно, он просто не будет работать - вы получите один большой перетаскиваемый блок, состоящий из все ваши события как одно. Очевидно, это не то, что вы хотите. Демонстрация проблемы: https://codepen.io/ADyson82/pen/KKwQEJm

Однако, если вы удалите «f c -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;
}

Рабочая демонстрация (на основе официальной демонстрации fullCalendar ): https://codepen.io/ADyson82/pen/MWYQxPE

Это почти то же самое, что и HTML, который вы показали на своем последнем скриншоте, поэтому неясно, почему он не работает для вас, если только что-то не так / отсутствует в другом месте вашего кода.