jQM - JQ UI draggable + droppable demo

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>     
</head>
<body>
    <div data-role="page" id="index">
        <div data-role="content">
            <div id="alles">
                <div  id="hintergrundbildZuordnungsaufgaben"><img src="http://www.didaktik.physik.uni-muenchen.de/forschung/elektronenbahnen/Betaversion/E-Feld/Bilder/Versuchsaufbau-Elektronenablenkroehre-unbeschriftet.png" width="740"/>
                </div>
            
                <div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
                <div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
                <div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
                <div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
                <div class="dropzones" id="zone5"><div class="dragzones" id="drag5">Item 5</div></div>
                <div class="dropzones" id="zone6"><div class="dragzones" id="drag6">Item 6</div></div>
                <div class="dropzones" id="zone7"><div class="dragzones" id="drag7">Item 7</div></div>
                <div class="dropzones" id="zone8"><div class="dragzones" id="drag8">Item 8</div></div>
                <div class="dropzones" id="zone9"><div class="dragzones" id="drag9">Item 9</div></div>
                <div class="dropzones" id="zone10"><div class="dragzones" id="drag10">Item 10</div></div>
                <div class="dropzones" id="zone11"></div>
           ...

CSS

@charset "utf-8";
/* CSS Document */

#check {
	position:absolute;
	top: 420px;
	left: 870px;
	font-size:1.2em;}



#items {
       margin-top: 10px;
       width: 100%;
}

#hintergrundbildZuordnungsaufgaben {
	position:absolute;
	top: 70px;
	left: 220px;}

.over {
    background-color: #cedae3;
}

.out {
    background-color: #a6bcce;
}
.dragzones {
	position: absolute;    
	width:140px;
	height:18px;    
	padding:0;
	margin:0;
	z-index:2;
	cursor:move;
	background-color:#FFFFFF;
	text-align:center;
	line-height: 18px;
	border:2px solid black;    
    margin-left: -2px;
    margin-top: -2px;
	}
#zone1 {top: 380px; left: 165px;}
#zone2 {top: 405px; left: 165px;}
#zone3 {top: 430px; left: 165px;}
#zone4 {top: 380px; left: 330px;}
#zone5 {top: 405px; left: 330px;}
#zone6 {top: 430px; left: 330px;}
#zone7 {top: 380px; left: 490px;}
#zone8 {top: 405px; left: 490px;}
#zone9 {top: 430px; left: 490px;}
#zone10 {top: 380px; left: 650px;}
#zone11 {top: 180px; left: 860px;}
#zone12 {top: 60px; left: 545px;}
#zone13 {top: 305px; left: 314px;}
#zone14 {top: 305px; left: 480px;}
#zone15 {top: 60px; left: 200px;}
#zone16 {top: 120px; left: 168px;}
#zone17 {top: 180px; left: 151px;}
#zone18 {top: 305px; left: 660px;}
#zone19 {top: 60px; left: 750px;}
#zone20 {top: 262px; left: 158px;}
.dropzones {
	background-color:#FFFFFF;
	width:140px;
	height:18px;
	padding:0;
	margin:0;
	border:2px solid black;
	position: absolute;
}

JavaScript

$(document).on('pageshow', '#index', function(){       
    $(".dragzones").draggable({
        start: handleDragStart,
        cursor: 'move',
        revert: "invalid",
    });
    $(".dropzones").droppable({
        drop: handleDropEvent,
        tolerance: "touch",              
    });
});

function handleDragStart (event, ui) { }

function handleDropEvent (event, ui) {
    if (ui.draggable.element !== undefined) {
        ui.draggable.element.droppable('enable');
    }
    $(this).droppable('disable');
    ui.draggable.position({of: $(this),my: 'left top',at: 'left top'});
    ui.draggable.draggable('option', 'revert', "invalid");
    ui.draggable.element = $(this);
}

/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {

var proto =  $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;

$.extend( proto, {
    _mouseInit: function() {
        this.element
        .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
        _mouseInit.apply( this, arguments );
    },

    _touchStart: function( event ) {
         this.element
        .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
        .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

        this._modifyEvent( event );

        $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
        this._mouseDown( event );

        //return false;           
    },

    _touchMove: function( event ) {
        this._modifyEvent( event );
        this._mouseMove( event );   
    },

    _touchEnd: function( event ) {
        this.element
        .unbind( "touchmove." + this.widgetName )
        .unbind( "touchend." + this.widgetName );
        this._mouseUp( event ); 
    },

    _modifyEvent: function( event ) {
        event.which = 1;
        var target = event.originalEvent.targetTouches[0];
        event.pageX = target.clientX;
        event.pageY = target.clientY;
    }

});

})( jQuery );