<script type="text/javascript">
$(document).ready(function() {
$( ".destino_1" ).draggable();
$( "#destino_1" ).droppable({
drop: function( event, ui ) {
//console.log(event);
var obj = ui.helper[0];
var miclass = $(obj).attr('class').split(" ");
//console.log(miclass[0]);
$( this ).addClass( miclass[0] );
}
});
$( ".destino_2" ).draggable();
$( "#destino_2" ).droppable({
drop: function( event, ui ) {
var obj2 = ui.helper[0];
var miclass2 = $(obj2).attr('class').split(" ");
$( this ).addClass( miclass2[0] );
}
});
$( ".destino_3" ).draggable();
$( "#destino_3" ).droppable({
drop: function( event, ui ) {
var obj3 = ui.helper[0];
var miclass3 = $(obj3).attr('class').split(" ");
$( this ).addClass( miclass3[0] );
}
});
$( "#click" ).click(function(){
$( "#respuestas div").each(function(){
//console.log($(this));
var Divclass = $(this).attr('class').split(" ");
var Divid = $(this).attr('id');
//console.log('class'+Divclass[1]);
//console.log('id'+$(this).attr('id'));
if (Divid != Divclass[1]){
console.log('es <>');
$(this).append('<span>Incorrecta</span>').addClass('error');
}
});
});
});
</script>
<div id="container_auto">
<div id="origen">
<div id="objeto_1" class="destino_1" draggable="true">respuesta 1</div>
<div id="objeto_2" class="destino_2" draggable="true">respuesta 2</div>
<div id="objeto_3" class="destino_3" draggable="true">respuesta 3</div>
</div>
<div id="respuestas">
<div id="destino_1"><p>Arrastre acá la respuesta</p></div>
<div id="destino_2"><p>Arrastre acá la respuesta</p></div>
<div id="destino_3"><p>Arrastre acá la respuesta</p></div>
</div>
</div>
<input id="click" type="button" value="Respuesta"/>
</body>
</html>