html5 setdata,How to .setData/.getData when using jQuery's .trigger('dragstart') for HTML5's drag an...

问题

When using jQuery's .trigger('dragstart') to fire off a function on an element with the attribute οndragstart="drag(event)" , how do you .setData/.getData for HTML5's drag and drop on touch device?**

Example flow:

User drags element with touchmove event

element the two following attributes:

.bind('touchmove', function(event){$(this).trigger('dragstart');});

οndragstart="drag(event)"

the drag(event) attempts to use event.dataTransfer.setData("Text", event.target.id);

the result is the following error.

"Uncaught TypeError: Cannot read property 'setData' of undefined"

For mouse event ondragstart, .setData/.getData call in the drag(event) function works fine. However, when firing the ondragstart via .trigger() the .setData/.getData methods do not work properly and an error is returned

Why do I get the following error when attempting to drag an order; and how do I fix it?**

"Uncaught TypeError: Cannot read property 'setData' of undefined"

Please refrain from directing towards using a .js library such as TouchPunch etc.

I'm trying to bind the 'touchmove' event to fire off the drag(event) and provide the same .setData/.getData functionality that is available for the mouse drag triggered event.

--->jsFiddle Link

HTML:

Order Queue

Johnny Cash

Order Number: 100

101

Johnny Cash

Queue Bar

---

Test Log

JavaScript:

var orders = $('.order');

var testelement = document.getElementById('testsensor-output');

var index = 0;

orders.each(function () {

$(this).bind('touchmove', function (evt) {

index++;

testelement.innerHTML = index + ' dragstart fired';

console.log('dragstart fired');

$(this).trigger('dragstart');

});

$(this).bind('dragstart', function(event){

drag(event);

});

});

function drag(ev) {

console.log(ev);

var obj = $('#' + ev.target.id);

ev.dataTransfer.setData("Text", ev.target.id);

var data = ev.dataTransfer.getData("Text");

}

回答1:

See jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't work

using the event.originalEvent.dataTransfer does the trick

回答2:

Try this

HTML

CSS

#draggable {width:50px;height:50px;background-color:#f00;position:absolute}

HTML5 Touch Event Handlers

var draggable = document.getElementById('draggable');

draggable.addEventListener('touchmove', function(event) {

var touch = event.targetTouches[0];

// Place element where the finger is

draggable.style.left = touch.pageX-25 + 'px';

draggable.style.top = touch.pageY-25 + 'px';

event.preventDefault();

}, false);

Thank you

回答3:

What I was trying to do here is impossible. I can't remember where I found the documentation, however the conclusion I arrived is that when setting/getting data via the HTML5 drag and drop method the event that fires the .setData much be a true mouse drag in order to transfer data. Another event cannot trigger a drag event and successfully .setData due to security restrictions.

I maybe incorrect, but for anyone else attempting the same... I suggest finding another method. I personally rewrote the code to entirely remove HTML5 drag and drop from the mix. It was an unhappy road to go down. :D

来源：https://stackoverflow.com/questions/25671377/how-to-setdata-getdata-when-using-jquerys-triggerdragstart-for-html5s-d