Last active
December 19, 2015 19:29
-
-
Save deepaksharma192/6006429 to your computer and use it in GitHub Desktop.
HTML5 Drag And Drop. Run I pad And Android, Desktop, mac.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <title>Drag & Drop</title> | |
| <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> | |
| <meta name="apple-mobile-web-app-capable" content="yes"/> | |
| <link href="./data/StyleEfeldmobile.css" rel="stylesheet" type="text/css"> | |
| <script type="text/javascript" src="./data/jquery-1.9.1.min.js"></script> | |
| <script type="text/javascript" src="./data/jquery-ui.min.js"></script> | |
| <script type="text/javascript" src="./data/jquery.ui.touch-punch.min.js"></script> | |
| <script type="text/javascript"> | |
| var richtige = 0; | |
| var num1=0; | |
| var num2=0; | |
| var num3=0; | |
| var num4=0; | |
| var num5=0; | |
| var num6=0; | |
| var score=0; | |
| jQuery(document).ready(function(){ | |
| $(init); | |
| /////////////////////// | |
| document.addEventListener('touchmove', | |
| function(e){ | |
| e.preventDefault(); | |
| },false | |
| ); | |
| /////////////////////////////// | |
| }); | |
| function init() { | |
| $("#tetxmm").hide(); | |
| $("#score1_text").hide(); | |
| $("#reset").hide(); | |
| $("#drag_text").show(); | |
| // Reset | |
| richtige = 0; | |
| num1=0; | |
| num2=0; | |
| num3=0; | |
| num4=0; | |
| num5=0; | |
| num6=0; | |
| score=0; | |
| $("#submit1").show(); | |
| $('#alles').html( '' ); | |
| var begriffe = [ 'Supercomputer', 'SmartPhone', 'Tablet', 'Desktop', 'Laptop', 'Netbook']; | |
| for ( var i=1; i<=6; i++ ) { | |
| $('<div>' + begriffe[i-1] + '</div>').data( 'number', i ).attr( 'id', 'zone'+i ).appendTo( '#alles' ).addClass('dragzones').draggable( { | |
| stack: '#alles div', | |
| revert: true | |
| } ); | |
| } | |
| for ( var j=11; j<=16; j++ ) { | |
| $('<div>' + + '</div>').data( 'number', j ).attr( 'id', 'zone11').appendTo( '#alles' ).addClass('dropzones').droppable( { | |
| accept: '#alles div', | |
| tolerance: 'pointer', | |
| hoverClass: 'drophover', | |
| drop: handleDropEvent, | |
| } );; | |
| $('<div>' + + '</div>').data( 'number', j ).attr( 'id', 'zone12').appendTo( '#alles' ).addClass('dropzones').droppable( { | |
| accept: '#alles div', | |
| tolerance: 'pointer', | |
| hoverClass: 'drophover', | |
| drop: handleDropEvent, | |
| } );; | |
| $('<div>' + + '</div>').data( 'number', j ).attr( 'id', 'zone13').appendTo( '#alles' ).addClass('dropzones').droppable( { | |
| accept: '#alles div', | |
| tolerance: 'pointer', | |
| hoverClass: 'drophover', | |
| drop: handleDropEvent, | |
| } );; | |
| $('<div>' + + '</div>').data( 'number', j ).attr( 'id', 'zone14').appendTo( '#alles' ).addClass('dropzones').droppable( { | |
| accept: '#alles div', | |
| tolerance: 'pointer', | |
| hoverClass: 'drophover', | |
| drop: handleDropEvent, | |
| } );; | |
| $('<div>' + + '</div>').data( 'number', j ).attr( 'id', 'zone15').appendTo( '#alles' ).addClass('dropzones').droppable( { | |
| accept: '#alles div', | |
| tolerance: 'pointer', | |
| hoverClass: 'drophover', | |
| drop: handleDropEvent, | |
| } );; | |
| $('<div>' + + '</div>').data( 'number', j ).attr( 'id', 'zone16').appendTo( '#alles' ).addClass('dropzones').droppable( { | |
| accept: '#alles div', | |
| tolerance: 'pointer', | |
| hoverClass: 'drophover', | |
| drop: handleDropEvent, | |
| } );; | |
| } | |
| }; | |
| function handleDragStart (event, ui) { | |
| alert("dfg") | |
| } | |
| function handleDropEvent (event, ui) { | |
| var zielfeld = $(this).data( 'number' )-10; | |
| var begriffsnummer = ui.draggable.data( 'number' ); | |
| var begriffsnummer1 = ui.draggable.attr( 'id' ); | |
| var ddd = $(this).attr('id'); | |
| $(this).droppable( 'disable' ); | |
| if (zielfeld == begriffsnummer) { | |
| ui.draggable.addClass( 'richtig' ); | |
| ui.draggable.draggable( 'disable' ); | |
| ui.draggable.position( { of: $(this), my: 'center center', at: 'center center' } ); | |
| ui.draggable.draggable( 'option', 'revert', false ); | |
| richtige++; | |
| //alert(ddd) | |
| if(ddd=='zone11'){ | |
| } | |
| if(begriffsnummer1 == 'zone1' && ddd=='zone14'){ | |
| num1=1; | |
| score++; | |
| } | |
| if(begriffsnummer1 == 'zone2' && ddd=='zone13'){ | |
| num2=1; | |
| score++; | |
| //alert(" num2=1;") | |
| } | |
| if(begriffsnummer1 == 'zone3' && ddd=='zone11'){ | |
| num3=1; | |
| score++; | |
| // alert(" num3=1;") | |
| } | |
| if(begriffsnummer1 == 'zone4' && ddd=='zone15'){ | |
| num4=1; | |
| score++; | |
| // alert(" num4=1;") | |
| } | |
| if(begriffsnummer1 == 'zone5' && ddd=='zone12'){ | |
| num5=1; | |
| score++; | |
| // alert(" num5=1;") | |
| } | |
| if(begriffsnummer1 == 'zone6' && ddd=='zone16'){ | |
| num6=1; | |
| score++; | |
| // alert(" num6=1;") | |
| } | |
| } | |
| if(richtige == 6){ | |
| $("#submit1").click(function(){ | |
| $("#submit1").hide(); | |
| $("#drag_text").hide(); | |
| $("#tetxmm").fadeIn(); | |
| $("#score1_text").fadeIn(); | |
| $("#reset").fadeIn(); | |
| richtige=0; | |
| document.getElementById("score_text").innerHTML = score; | |
| document.getElementById("score_total").innerHTML = 6; | |
| });} | |
| //alert(score) | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| function hideLoadingLayer(){ | |
| document.getElementById("loading_layer").style.visibility="hidden"; | |
| } | |
| </script> | |
| </head> | |
| <body style="margin: 0;overflow: hidden" onLoad="hideLoadingLayer();"> | |
| <div id="loading_layer" style="width: 1024px; position: absolute; margin: auto; height: 669px; z-index: 9999;"> | |
| <img id="img_sty" src="css/i/89.gif" alt=""border="0" style="position: absolute; left: 612px; top: 278px;"/> | |
| </div> | |
| <div style="width:750px;height:615px; background:url(data/bg.png); border:#993300 solid 5px;background-repeat:no-repeat; margin:auto; float:none;"> | |
| <div id="drag_text" style="position:absolute; color:#FFFFFF; font-family:Verdana; font-weight:bold;"></div> | |
| <div id="score1_text" style="position:absolute; color:#FFFFFF; font-family:Verdana; font-weight:bold;"></div> | |
| <div id="alles" style="position: absolute; width: 750px; height: 560px;"> | |
| <div id="zone1" style="z-index: 18; position:absolute;"></div> | |
| <div id="zone2" style="z-index: 19; position:absolute;"></div> | |
| <div id="zone3" style="z-index: 17; position:absolute;"></div> | |
| <div id="zone4" style="z-index: 16; position:absolute;"></div> | |
| <div id="zone5" style="z-index: 20; position:absolute;"></div> | |
| <div id="zone6" style="z-index: 14; position:absolute;"></div> | |
| <div id="zone11" style="z-index: 0; position:absolute;"></div> | |
| <div id="zone12" style="z-index: 9; position:absolute;"></div> | |
| <div id="zone13" style="z-index: 8; position:absolute;"></div> | |
| <div id="zone14" style="z-index: 7; position:absolute;"></div> | |
| <div id="zone15" style="z-index: 6; position:absolute;"></div> | |
| <div id="zone16" style="z-index: 5; position:absolute;"></div> | |
| </div> | |
| <div style="position:relative; z-index:9000; left: 332px; top: 573px;"> | |
| <div onClick="submit()" id="submit1" style="width: 91px; height:36px; background:url(data/Submit.png); cursor:pointer;"></div> | |
| <div onClick="init()" id="reset" style="width: 91px; height:36px; background:url(data/restart.png); cursor:pointer;"></div> | |
| </div> | |
| <div id="tetxmm" style="color: #993300; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; position:relative; width: 750px; height: 600px; background: url(data/Result.png); background-repeat:no-repeat; z-index: 2000; top: -36px; left: 0px;"> | |
| <div id="score_text" style="position: absolute; width: 220px; height: 41px; left: 406px; top: 277px;"></div> | |
| <div id="score_total" style="position: absolute; width: 220px; height: 41px; left: 406px; top: 334px;"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment