Vue.draggable: How to cancel a drag?

[pmartelletti]

@David-Desmaisons I want to cancel a drag if the http request that is triggered on the @move event fails. I've tried returning false (as per documentation here), but the item is not returned to the initial position.

How can I do this? If it helps, I'm just building kanbas board, so basically if the API call fails, I'd like the task to remain on the correct column / list, so the user knows that the task status was not updated (eventually I'll show a popup with this as well).

Thanks,

[David-Desmaisons]

I am working on this, I should be abble to provide shortly a hook to cancel drag operation.

[pmartelletti]

@David-Desmaisons awesome - I thought I was doing something wrong here! Can you let me know when this is ready, please? As would be very helpful for my app. Cheers & happy holidays!

[David-Desmaisons]

Here is the proposal:

move event will be removed and will be replaced by a move props:

move

Type: Function

Required: false

Default: null

If not null this function will be called in a similar way as Sortable onMove callback.
Returning false will cancel the drag operation.

function onMoveCallback(evt, originalEvent){
   ...
    // return false; — for cancel
}

evt object has same property as Sortable onMove event, plus two addicional properties:

move event object addicional properties:

• draggedContext:
  
  
  
  • index: dragged element index
  
  
  • element: dragged element underlying view model element
  
  
• relatedContext: context linked to current drag position
  
  
  
  • index: target index
  
  
  • element: target view model element
  
  
  • list: taget list
  
  
  • component: target VueComponent
  
  

Ex:
See Cancel.html for full example.

HTML:

    <draggable element="ul" :list="list" :move="checkMove"> 
    ... 
    </draggable>

Javascript:

var vm = new Vue({
    ...
    methods:{
        checkMove: function(evt) {
            if (evt.draggedContext.element.name=='apple'){
                return false
            }

            if (evt.relatedContext.element && evt.relatedContext.element.name=='strawberry'){
                return false
            }

            if (evt.relatedContext.list.length==2){
                return false
            }
            return true;
        },

[David-Desmaisons]

@pmartelletti Will this fit your needs?

[David-Desmaisons]

@pmartelletti , clone prop has been released in version 2.6.0-rc0. The documentation has been updated accordingly.

Cheers & Merry Christmas!

[pmartelletti]

@David-Desmaisons this is awesome. Will try it on monday, but that's what I was looking for! Thank you very much and merry Christmas to you too! :smile:

[sunilkumarverma]

[sunilkumarverma]

i have to stop drop event when element moving from block1 to block3 directly

[David-Desmaisons]

@sunilkumarverma , You should use the move props.

[ryatziv]

@pmartelletti were you able to cancel based on the HTTP call? I'm trying to do the same, and I'm unclear about how to use the move prop to accomplish this. There are 2 issues that I'm facing:

1. The prop is on the source list, not on the destination list (right?). The source list may not have context to decide whether the move is successful.
2. The function is synchronous. Doesn't it need to return a promise in order to use with HTTP calls.

[heroBack]

how to start(from ReadME)

[towfiles]

is it possible to cancel the dropping of the element if need be?.... i noticed onMove is fired even before you drop the element

[smilingkite]

I also wonder how to cancel a drag - in my case because the element is let go, but not in a droppable place.

[BENcorry]

it trigger so much times when i use move props and return false, how can i solve this problem.