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! 😄

[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.

[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.

[dorian-marchal]

If I understand this correctly, the move prop doesn't solve the original use case as the drag should be canceled based on the result of an HTTP request (that only fires when the element is dropped, I assume).

An after-move prop that would revert the change when it returns false would be nice.

[luckyboy07]

any workaround on this issue?

[FlavioOliveiraNeto]

@David-Desmaisons I want to cancel a drag according to the type of my destination element (I need a data inside of the destination element). I've tried to find the destination element using :move="onMove", but I can't find it, I only find the dragged element.

How can I do this?

Thanks,

[AreebaAyub]

i want to cancel drag on drop, but @EnD function doesnot provide reverting an item and :move prop is being called many times, How can i do that ? urgent answer is required

[fabioselau077]

i want to cancel drag on drop, but @EnD function doesnot provide reverting an item and :move prop is being called many times, How can i do that ? urgent answer is required

find fix?