Access the item.sortable object in the helper property

[MichaelTSS]

Thanks for the great work!

Pulled from jQuery's documentation, about the helper method:

A function that will return a DOMElement to use while dragging. The function receives the event and the element being sorted.

The sad news is I can't make a dynamic helper: either I use clone and get the whole source DOM or create a whole new element. The problem is unlike the start(), update() etc. methods, the helper() method doesn't give access to the ui.item.sortable object.

[thgreasi]

Yea, that's true...
The helper option, when provided, is invoked before the start callback, where ui-sortable get's initialized and creates the sortable object.
For now you will have to use a workaround (like item.scope()) or do your guessing using the DOM elements.

[thgreasi]

I would suggest you to do something similar to what start does.
We could probably just patch the item parameter of the helper method as well, but that would also add on more object that we will have to keep in mind and clean in order to avoid memory leaks.

I hope that this would be enough for your use case, is it?

[thgreasi]

Got an idea, I will try it tomorrow!

[MichaelTSS]

@thgreasi great!
I can't wait.

[thgreasi]

@MichaelTSS Just pushed sortableObjectOnHelper branch and opened #461. Waiting for your feedback!

Good night from Greece.

[MichaelTSS]

@thgreasi Hey, sorry for not responding earlier.
Something quite odd happened. I pulled from the sortableObjectOnHelper branch as suggested and added a console.log(ui.sortable) in the helper method and the object was empty ! Or rather, all key set up, each value set to undefined.

So I forger one of your Plunkr to show what was going on and... surprise ! The model in the Plunkr has all values set as you would expect.

I know how difficult it can be no to be able to reproduce this bug, so here is my config, hoping you will figure it out :-)

$scope.sortableResultsConfig = {
    update(e, ui) {
        // models not updated yet
        if (!ui.item.sortable.received) {
            // the item is coming from another list
            const bloc_index_source = $scope.selectedMail.blocs.findIndex(x => x.id === $(ui.item.sortable.source).data('bloc-id'));
            const bloc_index_target = $scope.selectedMail.blocs.findIndex(x => x.id === $(ui.item.sortable.droptarget).data('bloc-id'));
            if (bloc_index_source !== bloc_index_target) {
                const isThisResultInTargetList = (ui.item.sortable.droptargetModel.filter(x => x.id === ui.item.sortable.model.id).length > 0);
                if (isThisResultInTargetList) {
                    ui.item.sortable.cancel();
                }
            }
        }
        if (!ui.item.sortable.isCanceled()) {
            // do something
        }
    },
    connectWith: 'ol.results',
    items: '.result',
    handle: '.result-pane__body',
    cursorAt: { top: 15 },
    helper(e, ui) {
        console.dir(ui); // see the output in the screenshot above
        return DomFactory.getSortableResultHelper(socialNetwork, author, text);
    },
    cursor: 'move',
    distance: 10,
    opacity: 0.5,
    placeholder: 'sortable-placeholder'
};

[thgreasi]

Hi there!
That branch had already been merged into master and released as 0.14.1 .
As of the "udnefined properties" issue you are facing, this has many
duplicated in this repo.
The thing is (as stated in README) that we clear all the properties of the
item.sortable object after the sorting ends, as a way to eliminate any
chance that a memory leak originates from our side. As a result, when you
console.log the ui.sortable object or store it by reference in a variable,
as a way to access it after the sorting, you end up with an object with
empty properties.
The solution that I always suggest is that, in case that you need a
property of the sortable object, then store (or log) that property
explicitly somewhere in your code.

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[MichaelTSS]

Hey Thodoris,

Thanks for your reply.
When trying to reproduce my issue in CodePen, all properties had their values set as I was dragging an item between two lists. After dropping the item, the values are emptied - I understand that - but when that method is being called is when ui-sortable tries to return a DOM Element. It is while dragging that I am getting an empty model.

[thgreasi]

In order to avoid any side effects from the optional helper method, the sortable objects that is available during the hepler callback is cleared right after.

[thgreasi]

So please either use the object only inside the callback or clone it.

[MichaelTSS]

That is what I am doing, see :

    helper(e, ui) {
        console.dir(ui); // see the output in the screenshot above
        return DomFactory.getSortableResultHelper(socialNetwork, author, text);
    }

[thgreasi]

I probably wasn't clear enough. If you try:

helper(e, item) {
    console.log(item.sortable.model);
    return DomFactory.getSortableResultHelper(socialNetwork, author, text);
}

you will see that the object properties have values during the callback (just like in the rest callbacks).