2

i have trouble to drag and drop an item (its not an event, its an employee name) on an event.enter image description here

I want to drag an employee (see picture) on an event, but the 'employee' is no event. I am using jquery UI draggable/droppable. 

<script>
var calendar;
$(document).ready(function() {
    calendar = $('#calendar').fullCalendar({
    droppable: true,
    dropAccept: '.employeeItem',    
    drop: function(date, allDay, jsEvent, ui) {

}
});
});   

$(function() {
$(".employeeItem").draggable();
$(".fc-event").droppable({ 
    drop: function(event, ui) { 

    }
});
});
</script>

<?php for($i=1;$i<=30;$i++){?>
   <div>Simpson, Homer<br>
      10 / 14 h
   </div>
<?php }?>

<div id='calendar'></div>

After dropping an employee on an event, i need the corresponding event data (event-id etc) to save the process to the db. But jquery fullcalendars "drop (callback)" only provides the date that the item was dropped on.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
JuJu
  • 307
  • 1
  • 3
  • 18

1 Answers1

2

You can use eventAfterRender to add a custom id to the dom element using data properties. Then grab the id after the drop (event.target), update the event in the db, then refresh the dataSource.

Fiddle

$(document).ready(function() {  

    $('#calendar').fullCalendar({
        ...
        eventAfterRender: function(event, element){
            element.data('myId',event.myId);
            $(element).droppable({
                drop: function( event, ui ) {
                    var dragged = ui.draggable;
                    var targetId = $(event.target).data('myId');
                }
            });
        }
        ...
    });
});

$(document).ready(function() {
    $(".employeeItem").draggable();
});
scottysmalls
  • 1,231
  • 17
  • 23
  • another question: dropping on overlapping events will trigger the dropping twice,- for the background and foreground event – JuJu Jan 23 '16 at 18:39
  • @Julian - I think it gets a bit tricky there because the 'greedy' option in the droppable initialization, what we would normally use to only trigger the top most object, does not work with siblings (which overlapping fullCalendar Events are.) I would suggest exploring the suggestions in this post http://stackoverflow.com/questions/12724388 . Alternatively, you can turn off overlapping in fullCalendar and avoid the problem completely. – scottysmalls Jan 24 '16 at 12:26