Events do not provide access to the dataTransfer object.

[whitneyland]

Currently dataTransfer is only passed to the setData event, and getData is never called in sortable.js.

This means it is not possible to pass and receive custom data because there is no way to call dataTransfer.getData.

Possible solutions: 1) Pass dataTransfer to all events 2) Add a property "nativeEvent" on evt that allows the native event to be accessed.

Edit: I can make a pull request if you'll take it in. I ended up adding a property called "nativeEvent" on your component's event object.

Edit2: The more I look at it, the cleanest design seems to be using the same object for all events. This would add more capability and be consistent. For example, if you need the source list during the setData event, it would be accessible.

[gutenye]

I have the same issue, how else can I pass a custom object when drag and drop? any updates?

[gutenye]

@RubaXa

[RubaXa]

There is an option setData (https://github.com/RubaXa/Sortable/blob/master/Sortable.js#L173-L175), why it does not suit you?

[gutenye]

I need to call event.dataTransfer.getData("Text") in onEnd event to retrieve the data, but it does not provide dataTransfer object

[RubaXa]

I specifically put a link to the implementation setData, so at onEnd: dataTransfer.getData("Text") === dragEl.textContent.

[seanlawrenz]

I know this is old, but setData does not allow the dataTransfer Object on a drop. "I specifically put a link to the implementation setData, so at onEnd: dataTransfer.getData("Text") === dragEl.textContent." does not solve this.

I need to customize the returning data. Not just get the element. Most sortable lists come from dynamic data.

[CookieJon]

I think I'm having the same issue. When drag+cloning to another list, I can not think of a way to pass the OBJECT represented by the HTML EL to the sortable list that receives the cloned EL. Thought this would be a no brainer, but...

Tried lots of things in events, setting dataTransfer data, and adding/cloning properties on the HTML EL, But in every case thwarted by events either not containing the index, access to the HTML El, or the DataTransfer in the order needed.

I think this must be simpler than I'm making it. What am I missing?

EDIT: I see from the comments evt.dataTransfer should be available onStart & onEnd. Not working for me, and I'm on "sortablejs": "^1.7.0". If it's supposed to work, then I'm doing something else wrong. Ok thanks.

[CookieJon]

Well I worked around it quite easily in the end. Here's how, in case it helps anyone else:

 onClone:(e) => {  
  e.clone.objs = self.value // <- set clone's 'objs' property to this sortable's whole object array 
}
onAdd(e) => {
  e.clone.obj = e.clone.objs[e.oldIndex] // <- now we have e.oldIndex, fetch the obj from the array
  this.$emit('add', e) // <- the actual object is now available to the event. handler.
}

[tobychidi]

So no fix to this?