How to cancel a drag? about vue.draggable HOT 18 CLOSED

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;
		},

from vue.draggable.

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

from vue.draggable.

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.

from vue.draggable.

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

from vue.draggable.

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

from vue.draggable.

@pmartelletti Will this fit your needs?

from vue.draggable.

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

Cheers & Merry Christmas!

from vue.draggable.

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

from vue.draggable.

from vue.draggable.

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

from vue.draggable.

@sunilkumarverma , You should use the move props.

from vue.draggable.

how to start(from ReadME)

from vue.draggable.

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

from vue.draggable.

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

from vue.draggable.

any workaround on this issue?

from vue.draggable.

@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,

from vue.draggable.

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

from vue.draggable.

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?

from vue.draggable.