I'm using the dragStart event to store the position in the list of the item that's about to be dragged and I'm comparing it to the position of the item when it's dropped in the dragEnd event.
I can't do that because the dragStart seems to be fired again in checkPreEnd so the position that I previously stored is updated just before I enter the dragEnd event, and the position is the same.
Can you please explain why the dragStart is fired in the checkPreEnd and a way to get my code to work?
My workaround for now is to check the event type when entering the dragStartFunction but I really don't like this.
My code :
let muuriOptions = {
dragEnabled: true,
hideDuration: 1,
showDuration: 1,
layoutOnInit: true,
dragHandle: '.span4.proj-div',
dragStartPredicate: dragStartFunction,
dragSortPredicate: dragSortPredicateFunction
};
$('#mainList').empty().append(list);
mainMuuri = new Muuri('#mainList', muuriOptions);
mainMuuri.on('dragMove', dragMoveFunction).on('dragEnd', dragEndFunction);
let dragStartFunction = function (item, event) {
let grid = item.getGrid();
let $grid = $(grid.getElement());
if (event.type ==='end') return false;
positionItemStart = grid.getItems().indexOf(item);
// Prevent the item from being dragged if the container list is disabled.
if ($grid.is(':disabled')) return false;
if ($grid.hasClass('disabled')) return false;
// For other items use the default drag start predicate.
return Muuri.ItemDrag.defaultStartPredicate(item, event);
};
let dragEndFunction = function (item, event) {
let $grid = $(item.getGrid().getElement());
let $items = $(item.getGrid().getItems());
let $droppedElement = $(item.getElement());
let $nextElement = $items[$items.index(item) + 1] && $($items[$items.index(item) + 1].getElement());
let positionDestinationNextBlocId;
let blocToMoveId = $droppedElement.data("bloc-id");
let nextElementBlocId = $nextElement && $nextElement.data('bloc-id') ? $nextElement.data('bloc-id') : undefined;
positionDestinationNextBlocId = nextElementBlocId;
if (positionDestinationNextBlocId === undefined) {
positionDestinationNextBlocId = $droppedElement.parents("li").data("bloc-id");
}
// if the position of the item has changed, we update the position in the backend
if (positionItemStart !== item.getGrid().getItems().indexOf(item)) {
updateBlocPosition(blocToMoveId, positionDestinationNextBlocId);
}
positionItemStart = undefined;
$(item.getElement()).removeProp('dragged');
};
Should I use dragInit instead of dragStart to solve my issue?
I'm using the dragStart event to store the position in the list of the item that's about to be dragged and I'm comparing it to the position of the item when it's dropped in the dragEnd event.
I can't do that because the dragStart seems to be fired again in checkPreEnd so the position that I previously stored is updated just before I enter the dragEnd event, and the position is the same.
Can you please explain why the dragStart is fired in the checkPreEnd and a way to get my code to work?
My workaround for now is to check the event type when entering the dragStartFunction but I really don't like this.
My code :
Should I use dragInit instead of dragStart to solve my issue?