How to .setData/.getData when using jQuery's .trigger('dragstart') for HTML5's drag and drop functionality

4
votes

When using jQuery's .trigger('dragstart') to fire off a function on an element with the attribute ondragstart="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');});
    • ondragstart="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:

<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");
}
3
javascriptjqueryhtmldrag-and-droptouch

3 Answers

0
votes

Try this

HTML

<div id="draggable" ></div>

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

0
votes

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