In between the calendar div and the external events fullcalendar - fullcalendar

Question

Can anybody tell me which fullcalendar event callback should I use
To handle the case where : the current external event stopped dragging
and it's localised not over the external events Box neither over The Calendar?
knowing that I have both methods isEventOverDiv
//return true/false if we are (not) over the external events and isEventOverDivCal//return true/false if we are (not) over the calendar
I tried in eventDragStop: function (event, jsEvent, ui, view)
eventDragStop: function (event, jsEvent, ui, view){
// if the event is not over the external events box and neither over the calendar
if(!isEventOverDiv(jsEvent.clientX, jsEvent.clientY) && !isEventOverDivCal(jsEvent.clientX, jsEvent.clientY) ) {
// reset
var reccupuredIndexForTitle=$(this).attr('id');
$scope.ctrlendDragging(reccupuredIndexForTitle);
}
}
//return true if we are over the external events
var isEventOverDiv = function (x, y) {
var external_events = $('#external-events');
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left &&
y >= offset.top &&
x <= offset.right &&
y <= offset.bottom) {return true;}
return false;
};
//return true if we are over the calendar
var isEventOverDivCal = function(x, y) {
var external_events = $( '#calendar' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true;}
return false;
}
but it's not working.
update 2
in order to overcome the obstacle of putting events above the virtual scroll bar during their trip into the calendar
1- I apply from mycontroller $scope.ctrlstartDragging
(which triggers from the HTML view on ondragstart="angular.element(this).scope().ctrlstartDragging(id)" callback).
$scope.ctrlstartDragging = function(id) {
var book = document.getElementById(id);
var domRect = absolutePosition(book);
book.style.position = 'fixed';
book.style.top = domRect.top + 'px';
book.style.left = domRect.left + 'px';
book.style.width=(domRect.width) + 'px';
};
and to be able to unset css styles (position top left width)
(N.B: ondragend="angular.element(this).scope().ctrlendDragging(id)" callback)
is not fired and I don't know why but it's not a problematic in my case)
so the purpose is that I should call manually
$scope.ctrlendDragging = function(id) {
var book = document.getElementById(id);
book.style.position = 'relative';
book.style.top = 'unset';
book.style.left = 'unset';
book.style.width='unset';
};
and to do as I said, in case the user aborts to put the event on the calendar during the dragging and this event is positioned both outside the external event box and outside the calendar.
but in my case see MyPlunk I need when the revert is applied , I will need during the revert of this event to the external event box to do make a call to it with the folloiwing
// reset
var reccupuredIndexForTitle=$(this).attr('id');
$scope.ctrlendDragging(reccupuredIndexForTitle);
so I need when the revert is applied I sould apply those two lines
because if they are not applied when an user abort a dragging into the calendar
the event revert but without the unset css styles applied to .style.position top left width
I would get an one isolated external event on the top of the external events box like shown below:
Many thanks.

Answer 1

added the following to my controller:
var x =-1;
var y=-1;
$('#external-events').on('dragstop', function(evt)
{
isDragging = false;
x = evt.originalEvent.pageX;
y = evt.originalEvent.pageY;
if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )
{
// reset
var reccupuredIndexForTitle=$('.fc-event').attr('id');
$scope.ctrlendDragging(reccupuredIndexForTitle);
}
});
As you can see from the code, I used jquery on('dragstop') because I don't know why
on ondragend event is not fired
so I removed it from my view HTML ondragend="angular.element(this).scope().ctrlendDragging(id)"
and called manualy from my controller $scope.ctrlendDragging(id) to reset the current dragged event when stoped via $('#external-events').on('dragstop', function(evt)
and handled the case the current external event stopped dragging and it's localised not over the external events Box neither over The Calendar
via
if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) )
Working codePen
update2:
Because The first solution is basic and work in hazardous conditions
It works only for the first draggable li
and it's not exact nor precise. I made an update to the following:
var domRect;
var isDragging = false;
var x =-1;
var y=-1;
$scope.positionX =-1;
$scope.positionY=-1;
var myId=-1;
$(document).ready(function() {
$scope.ctrlstartDragging = function(id) {
myId = id;
};
$scope.ctrlendDragging = function(id) {
book.style.zIndex = "9999";
};
$('#external-events').on('dragstop', function(evt)
{
$scope.$watchGroup(['positionX','positionY'],function () {
x = $scope.positionX;
y = $scope.positionY;
});
if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) ) {
// reset
var reccupuredIndexForTitle=myId;
$scope.ctrlendDragging(reccupuredIndexForTitle);
}
});
});//end of $(document).ready(function()
Enclosed in $(document).ready(function() {
all functions that shoul be appplied in document ready:
1- $scope.ctrlstartDragging from which we get myId equal (current li) id passed
via html view ondragstart="angular.element(this).scope().ctrlstartDragging(id)"
2- $scope.ctrlendDragging n.b : I set the z-index via
book.style.zIndex = "9999"; so we could work in a modal context
3- $('#external-events').on('dragstop', function(evt) that should work in
$(document).ready(function() { or $window.load
where added a watchgroup on changes made on positionX positionY of an li
$scope.$watchGroup(['positionX','positionY'],function () {
x = $scope.positionX;
y = $scope.positionY;
});
also added
if(!isDragging && x !=-1 && y!=-1 && !isEventOverDiv(x, y) && !isEventOverDivCal(x, y) ) {
// reset
var reccupuredIndexForTitle=myId;
$scope.ctrlendDragging(reccupuredIndexForTitle);
}
which work with myId this time gotten from $scope.ctrlstartDragging
On the other Hand, I added when initialising external events
$('#external-events .fc-event').each(function() {
drag: function(){ to get the exact positionX positionY for the current dragged li element
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0, // original position after the drag
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$scope.$apply(function() {
$scope.positionX =xPos;
$scope.positionY = yPos;
});
}
});
Working codePen for li
Hope it may help somebody ;).