how to make dnd-drop work with asynchronous call in callback?

[pisethdanh]

I'm fairly new to angularJS.

I am trying to use dnd-drop on the <ul> element to make an ajax call to the server to determine if the drop should be cancelled or not.

<ul dnd-list="myList" dnd-drop="dropCallback(index, item)">
    <li ng-repeat="item in myList">
        ...
    </li>
</ul>

$scope.dropCallback = function (index, item) {
    // async call
    $http.post(...) {
        // success
        return item;
    }

    return false;
});

The problem I'm having is that the callback function is returned before the async call completes. The only way to successfully have the list update is to return item.

However, return item is executing after the dropCallback function completes.

How can I get around this? Is the dnd-drop callback the correct callback to use or should I be using a different callback?

I have also tried using promises and $q to no avail.

Thank you

[tplaner]

I think you'll need to always return false, and then manually add the item to the list when the server returns a success.

Something like:

$http.post(...).then(function(item) {
  $scope.myList.splice(index, 0, item);
});

[pisethdanh]

Doing what you suggested allows me to insert the item in the list if the async call was successful, but doesn't remove the old item. Is there a way to determine what the old item's previous index is so that I can easily remove it before inserting the new item?

[pisethdanh]

I think I may have found a potential bug in the dnd-drop callback.
Should I create a new issue for this?

In a vertical list, when dragging an item from the top and placing it below, the index parameter is 1 more than it should be.

For example, if I drag the first item and drop it in the first opened slot, the index is 1.
However, if I drag an item from the bottom of the list to the top first opened slot, the index is 0.

The same behaviour occurs throughout the entire list. When dropping an item in the second spot from top down, the index is 2, but when dropping an item in the second spot from bottom up, the index is 1.

Can someone please investigate this issue?

Thank you

[pisethdanh]

Can I get a response by someone please?

[jjoekoullas]

I ran into this as well. It has to do with dnd-moved being called after
obtaining the index of the element being moved. It only shows up when
moving to a higher index in the same list.

I have a fork with this fixed, along with a few other things that I needed
to tweak for my liking. Of course, caveat emptor, I may have broken some
other functionality Marcel originally implemented which I don't need.

On Tue, Nov 17, 2015 at 9:07 AM sethiron notifications@github.com wrote:

Can I get a response by someone please?

—
Reply to this email directly or view it on GitHub
#168 (comment)
.

[jjoekoullas]

PS. It is probably a better idea to create a new issue instead of adding
other, perhaps unrelated, issues onto an existing one. It makes it easier
to keep track of what has been properly addressed and what has not.

On Tue, Nov 17, 2015 at 11:42 AM J.Joe Douglas j.joe.douglas@gmail.com
wrote:

I ran into this as well. It has to do with dnd-moved being called after
obtaining the index of the element being moved. It only shows up when
moving to a higher index in the same list.

I have a fork with this fixed, along with a few other things that I needed
to tweak for my liking. Of course, caveat emptor, I may have broken some
other functionality Marcel originally implemented which I don't need.

On Tue, Nov 17, 2015 at 9:07 AM sethiron notifications@github.com wrote:

Can I get a response by someone please?

—
Reply to this email directly or view it on GitHub
#168 (comment)
.

[pisethdanh]

I have created the issue:
#173

I'd like to continue this discussion in the other thread.

Thanks.

[marceljuenemann]

On the opening question, you can't wait for the result of an asynchronous call in an event handler, because, well, JavaScript is single threaded. From 1.4.0 you can return true in the drop handler to signalize that you will take care of inserting the element later.

My two cents on user experience: It is very weird for the user when they drop a item into a new list and it completely disappears until the server responded. A better design IMO is to update the model on the client immediately, and sync the model to the server in the background. For example, if edit Google docs it updates the doc immediately and shows a "Saving..." indicator to indicate that the changes are not yet synced with the server. But all this might vary by use case obviously.