Touch-enabled Native HTML5 Drag & Drop

by Stephen King

HTML

<script src="http://bluehollercreative.com/public-forum-data/phantom-limb.js"></script>
<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 -->

CSS

body {
    background-color: rgba(50, 113, 247, 0.75);
    font-family: sans-serif;
}
h1 {
    text-align:center;
    margin:15px;
    font-size: 1.75em;
}
h2 {
    text-align:center;
    margin: 0;
}
.orderqueue {
    margin-bottom: 15px;
}
.orderList, .order, .queuebar, .orderqueue, .testsensor {
    background-color: #fff;
    display: block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 4px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
}
.l-col-container {
    width: 600px;
    margin: 0 auto;
}
.orderList {
    background-color: rgba(0, 0, 255, .25);
    padding: 10px;
    width: 50%;
    margin: 15px auto;
    background-color: #fcfcfc;
    float: right;
}
.order {
    background-color: #fff;
    margin: 5px;
}
.queuebar {
    /* position: absolute; */
    display: block;
    background-color: #fff;
    float:left;
    width: 200px;
    top:0;
    left:0;
}
.queuebar, .orderList {
    height: 200px;
    padding: 25px 15px;
}
.queuebar-dropzone {
    position: relative;
    width: 100%;
    height: 80%;
    background-color: #000;
}
#testsensor {
    display: block;
    position: relative;
    width:100%;
    min-height: 55px;
    background-color: #fff;
    float: left;
}
#testsensor h2 {
    margin: 15px;
}

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");
    var index = queuebarList.indexOf(data);
    
    //console.log(ev);
    //var obj = $('#' + ev.target.id);
    //if (ev.dataTransfer) {
    //ev.dataTransfer.setData("Text", ev.target.id);
    //var data = ev.dataTransfer.getData("Text");
    //} else {
    //    console.log('no dt');
    // }
}

window.drag = drag;

// Props to BRIAN CARSTENSEN @ http://www.vodori.com/ using phantom-limb.js to simulate touch events