Skip to content

dragStart event is fired a second time just before the dragEnd event #576

Description

@JGI-SOCOMEC

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions