Fullcalendar 与 Select2 的事件

Question

having many events to manage, I opted for a select to dissect the events and drop them in the calendar, I made this <https://jsfiddle.net/max1974/mr5yxe7o/4/> but I am faced with 2 problems..... 1 ° Initially the objects in the select drop into the calendar, but then if you select other items from the select the drop stops working. 2 ° while I drop the object from the mouse disappears and reappears only when I release it. Could you help me please.

Answer 1

Please see my complete working jsfiddle: https://jsfiddle.net/gq8eofyL/

You have to use helper() function to clone the element object inside select2 and avoid relative position hiding the element outside the select2 main <span> . Like in this example:

helper: function(){
    return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}});

In addition, use Select2 events: https://select2.org/programmatic-control/events in order to re-initialize draggables when Select2 recreates the elements, everytime you select/remove the elements (see my comment1 above):

function initSelectDraggable(){
$("ul.select2-selection__rendered li").each(function(){
    $(this).data('event', {
      title: $.trim($(this).text()),
      stick: true 
    });
   $(this).draggable({
     
    
      revert: true,     
      revertDuration: 0,
      
      
      helper: function()
            {
                return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
            }
    });
     
 });
}

Answer 2

Thanks it works great, now the problem remains that when I drop the event I lose data-id, data-num that I would need to save them in the DB and the event remains blue in the calendar instead of the chosen color. Thanks again to everyone jsfiddle.net/max1974/bmqdax0f/57/