Question

I am working on a tool based on jQuery UI draggable functionality.

I have a number of boxes in the left column of the table. When they are dragged in yellow area, I would expect the remaining divs to move upwards to fill the space left by the box that was moved.

But it’s not happening. Why?

Answer 1

It is pretty difficult to test but from my knowledge on the question here is a possible cause/solution to this.

The droppable plugin does not remove the dragged element from its original markup position, it is visually moved to the droppable element (with some option allowing to accept to drop certain elements or not, events, etc).

The elements have a position: relative css rule, which represents the “normal flow” for elements (in the order they appear in the markup). So even if the element is visually placed elsewhere on the page with css, its place in the markup is still the same and it is still taking the space it normally should.

This fiddle illustrate what i’m trying to explain 🙂

By looking at the source code form the “working website”, they actually remove the dragged element from the original draggable list and re-create it in the droppable list !

When they define the .droppable() they do this:

h.droppable({
    tolerance: "intersect",
    accept: ".card",
    greedy: true,
    drop: function (a, b) {
        card = b.draggable;
        putCardIntoStack(card, c)
    }
});

On the drop event, they call putCardIntoStack(card, c) passing the currently dragged element as the card parameter. Within this method, they remove the original “card” (a.remove()) and re-create it in the dropzone (newcard = createCard();):

function putCardIntoStack(a, b) {
    progressVal = $('#progBarRd').width();
    card_idDOM = a.attr('id');
    card_idDB = card_idDOM.substr(IDPREFIX_CARD.length, card_idDOM.length - IDPREFIX_CARD.length);
    stack_idDB = b.substr(IDPREFIX_STACK.length, b.length - IDPREFIX_STACK.length);
    $.ajax({
        url: URL_DRAGDROPAJAX,
        type: 'POST',
        data: 'action=movecard&cardid=' + card_idDB + '&tostack=' + stack_idDB + '&prog=' + progressVal
    });

    // 'a' is the card
    // they extract the id/content from the dragged card
    cardId = a.attr('id');
    cardLabel = a.text();

    // they remove the card from the DOM
    a.remove();

    // they create a new card with the extracted info
    newcard = createCard(cardId, cardLabel);
    newcard.addClass('stackcard');

    // and append it to the dropzone
    $('#' + b).removeClass("empty").find('.stackDrop').append(newcard);

    globalcheck()
}

jQuery UI does a similar thing on the droppable demo page. On the drop event, they call a function deleteImage() which removes the dragged image from the original markup and appends it to the drop zone.

I hope I’m clear enough 🙂
I also hope I’m right, it is pretty difficult to test quickly but it makes sense 🙂