Skip to content

Instantly share code, notes, and snippets.

@deepaksharma192
Last active December 19, 2015 19:29
Show Gist options
  • Save deepaksharma192/6006429 to your computer and use it in GitHub Desktop.
Save deepaksharma192/6006429 to your computer and use it in GitHub Desktop.
HTML5 Drag And Drop. Run I pad And Android, Desktop, mac.
<!DOCTYPE html>
<html>
<title>Drag &amp; 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