When using jQuery.trigger ('dragstart') to disable the feature of an element with ondragstart = "drag (event)" attribute, how do you drag .setData / .getData for HTML5 on a touch device? **

Example stream:

• User drags element with touchmove event
• enter the following two attributes:
  • .bind ('touchmove', function (event) {$ (this) .trigger ('dragstart');});
  • ondragstart = "drag (event)"
• drag (event) tries to use event.dataTransfer.setData ("Text", event.target.id);
• the result is the following error.
• "Uncaught TypeError: Cannot read property 'setData' from undefined"

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

Why does an error occur when trying to drag an order; and how to fix it? **

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

Please refrain from guiding how to use a .js library like TouchPunch, etc.

I am trying to bind a touchmove event to disable drag (event) and provide the same .setData / .getData functionality that is available for a mouse movement event.

---> jsFiddle Link <---

HTML:

<div class="l-col-container">
    <section id="1130" class="orderqueue">
         <h1>Order Queue</h1>

        <div class="orderList">
            <div id="100" class="order" timeslot="1130" ordernumber="100" draggable="true" ondragstart="drag(event)">
                <div class="order-name">Johnny Cash</div>
                <div class="order-num">Order Number: 100</div>
            </div>
            <!-- /order -->
            <div id="101" class="order" timeslot="1130" ordernumber="101" draggable="true" ondragstart="drag(event);">
                <div class="order-num">101</div>
                <div class="order-name">Johnny Cash</div>
            </div>
            <!-- /order -->
        </div>
        <!-- /orderlist -->
    </section>
    <div class="queuebar">
         <h2>Queue Bar</h2>

        <hr/>
        <div class="queuebar-dropzone"></div>
    </div>
    <div id="testsensor">
         <h2>Test Log</h2>

        <p id="testsensor-output"></p>
    </div>
</div>
<!-- /l-col-container -->

      

        
        
        
      

    

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");
}