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..
<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>
Tema: HTML y JavaScript Arrastrar y Soltar ejemplo drag and drop Juego acertar objetos (Leído 4070 veces)
RSS -
WAP2