Mostrar Mensajes
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / HTML y JavaScript Arrastrar y Soltar ejemplo drag and drop Juego acertar objetos
« en: 02 de Noviembre 2016, 16:56 »
Hola, en este codigo podemos arrastrar y soltar unicamente cuando es correcto.
Como puedo hacer para que las fotos queden en cualquier casilla sin importar si estan bien o mal. Al final necesitaria un boton que al pulsar me dijiera cuantas estan bien. Gracias, aqui está el código..
Como puedo hacer para que las fotos queden en cualquier casilla sin importar si estan bien o mal. Al final necesitaria un boton que al pulsar me dijiera cuantas estan bien. Gracias, aqui está el código..
Código: [Seleccionar]
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
}
.clear { clear: both; display: block; }
.f_right { float: right; }
.f_left { float: left; }
.hidden { display: none; }
#main
#one { height: 150px;width: 270px; }
#two { height: 150px;width: 270px; }
#three {height: 150px;width: 270px; }
#four {height: 150px;width: 270px; }
.left_side
{
width: 220px;
border: 2px solid #039;
text-align: center !important;
float: left;
margin: 0px auto 0px 7px;
}
#dragcenter
{
padding: 0px auto 0px auto;
text-align: center;
border: 0px dashed #ff0000;
width:800px;
height:150px;
margin-top:10px;
margin-left:5px;
}
#object1, #object2, #object3, #object4, #object5, #object6, #object7,
#object8, #object9, #object10, #object11, #object12
{
font-size:.95em;
width:;
background-color:;
border:;
color:black;
cursor: pointer;
text-align: center;
padding: 6px;
margin: 4px;
float: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Prevent text from being selectable */
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#feedback
{
border: 0px solid #ff0000;
float: left;
background-color:;
color: green;
width: 100%;
margin:0px;
padding:0px 0px 0px 0px;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://ontrack-media.net/AF/js/tpunch.js"></script>
<script type="text/javascript" >
var object1 = document.getElementById('object1');
var object2 = document.getElementById('object2');
var object3 = document.getElementById('object3');
var object4 = document.getElementById('object4');
var object5 = document.getElementById('object5');
var object6 = document.getElementById('object6');
var object7 = document.getElementById('object7');
var object8 = document.getElementById('object8');
var object9 = document.getElementById('object9');
var object10 = document.getElementById('object10');
var object11 = document.getElementById('object11');
var object12 = document.getElementById('object12');
var objArray = ['#object1', '#object2', '#object3', '#object4', '#object5', '#object6','#object7', '#object8', '#object9', '#object10',
'#object11', '#object12'];
//var targArray = ['#target1', '#target2', '#target3', '#target4', '#target5'];
var startDrag = '';
var resetter = 0;
//var draggable = ui.draggable;
//jQ
var j = jQuery.noConflict();
j(document).ready(function()
{
//draggin
j('#object1, #object2, #object3, #object4, #object5, #object6,#object7, #object8, #object9, #object10, #object11, #object12').draggable
({
start: function(event,ui) {
startDrag = ui.position;
//console.log(startDrag);
},
containment: '#main',
cursor: 'move',
//snap: '#target1',
//snapMode: 'inner',
//snapTolerance: 35,
//revert: wrong,//call the wrong function on revert
//revert: true,
revert: function(valid)
{
if(!valid)
{
//this.remove();
j('#feedback').html('<h3>Try again!</h3>');
return true;
}
},
stack: 'div',//bring it to the top by adjusting z-index of the element
drag: clearer,
stop: function(event,ui)
{
//console.log("finished");
}
});
//droppables
j('#one').droppable
({
drop: right,
accept: '#object3,#object6,#object9,#object7,#object10'
//tolerance: intersect
});
j('#two').droppable
({
drop: right,
accept: '#object1,#object8,#object10,#object2'
});
j('#three').droppable
({
drop: right,
accept: '#object2,#object7,#object12,#object8'
});
j('#four').droppable
({
drop: right,
accept: '#object4,#object5,#object11'
});
});//end on doc load
//EXTERNAL METHODS
//clear the feedback div onDrag
function clearer(event, ui)
{ j('#feedback').html(''); }
//if the dropTarget is correct
function right(event, ui)
{
j('#feedback').html('<h2>Correct!</h2>');
var draggable = ui.draggable;
draggable.draggable('disable');
draggable.draggable('option', 'revert', false);//turn revert off
//draggable.offset(j(this).offset());//lock it on top of the targets x and y
draggable.css('background-color','#ffffff');
draggable.css('color','#09C');
resetter++;
if (resetter == 12)
{
//console.log(resetter);
j('#feedback').html('<h1 class="greentext">Congratulations! All correct!</h1>');
}
else
{
//do nothing
}
}
</script>
</head>
<body>
<center>
<div id="main">
<table >
<tbody >
<tr>
<td><h5>Electrical Energy </h5> <div id="one" class="left_side"></div></td>
<td><h5> Thermal Energy </h5> <div id="two" class="left_side"></div></td>
<td><h5> Light Energy </H5> <div id="three" class="left_side"></div></td>
<td><h5>Sound Energy </h5><div id="four" class="left_side"></div></td></tr>
</tr>
</tbody>
</table>
<div class="clear"></div>
<font size="5" style="font-family:verdana;">Objects</font>
<table class="id2116">
<tbody>
<tr>
<td><div id="object1"<!-- thermal --><p><img alt="" class="" src="images/EBSD_Images.png " style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Gas Burner
</figcaption></div></td>
<td><div id="object2"<!-- Light --><p><img alt="" class="" src="images/EBSD_Images.png " style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Sun
</figcaption></div></td>
<td><div id="object3"<!-- elec --><p><img alt="" class="" src="images/EBSD_Images.png " style="width: 60px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Power Lines
</figcaption></div></td>
<td><div id="object4"<!-- sound --><p><img alt="" class="" src="images/EBSD_Images.png " style="width: 50px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Saxophone
</figcaption></div></td>
<td><div id="object5"<!-- sound --><p><img alt="" class="" src="images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Dog Barking
</figcaption></div></td>
<td><div id="object6"<!-- elec --><p><img alt="" class="" src="images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Power Outlet
</figcaption></div></td></tr>
<tr>
<td><div id="object7"<!-- Light --><p><img alt="" class="" src="images/EBSD_Images.png " style="width: 50px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Light Bulb
</figcaption></div></td>
<td><div id="object8"<!-- ther --><p><img alt="" class="" src="images/EBSD_Images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Fire
</figcaption></div></td>
<td><div id="object9"<!-- elec --><p><img alt="" class="" src="images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Cell Phone Charging
</figcaption></div></td>
<td><div id="object10"<!-- thermal --><p><img alt="" class="" src="images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Oven
</figcaption></div></td>
<td><div id="object11"<!-- sound --><p><img alt="" class="" src="images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Girl Shouting
</figcaption></div></td>
<td><div id="object12"<!-- Light --><p><img alt="" class="" src="images.png" style="width: 80px; margin-bottom: 10px;" /></p><figcaption class="captionStyle">Neon Sign
</figcaption></div></td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<div id="feedback" ></div>
<div class="clear"></div>
</div><!-- main-->
</center>
<div align="center"><button type="reset" value="Reset"><a href=""><font size="3">Play Again</font></a></button></div>
</body>
RSS