Buenos días
Estoy utilizando este ejercicio:
http://www.dhtmlgoodies.com/scripts/...ag-drop-3.html
Con algunos ajustes asi:
Código HTML:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css">
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
<div id="contenedor_preguntas">
<div class="campo_texto">Texto 1
</div> <div class="dragableBox_1" id="box1">Pregunta 1
<div class="campo_texto">Texto 2
</div> <div class="dragableBox_2" id="box2">Pregunta 2
<div id="box101" class="dragableBoxRight" title="Ubique aca la respuesta"><p>Respuesta 1
</p></div> <div id="box102" class="dragableBoxRight" title="Ubique aca la respuesta"><p>Respuesta 2
</p></div>
<script type="text/javascript">
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId);
var subDivs = targetObj.getElementsByTagName('DIV');
if(subDivs.length>0 && targetId!='contenedor_preguntas')return;
var sourceObj = document.getElementById(idOfDraggedItem);
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1;
if(numericIdTarget-numericIdSource==100){
sourceObj.style.backgroundColor='#0F0';
}else{
sourceObj.style.backgroundColor='';
}
if(targetId=='contenedor_preguntas'){
targetObj = targetObj.getElementsByTagName('DIV')[0];
}
targetObj.appendChild(sourceObj);
}
var dragDropObj = new DHTMLgoodies_dragDrop();
dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addTarget('box101','dropItems');
dragDropObj.addTarget('box102','dropItems');
dragDropObj.addTarget('contenedor_preguntas','dropItems');
dragDropObj.init();
Y el css:
Código CSS:
Ver original#contenedor_preguntas{
width:945px;
height:440px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: thin solid #F00;
}
.pregunta_1{
width:234px;
height:360px;
float:left;
background-color:#FCF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.pregunta_2{
width:234px;
height:360px;
float:left;
background-color:#C33;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#respuestas{
width:945px;
height:80px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
position: absolute;
float: left;
border: 1px solid #000;
}
.campo_texto{
width:225px;
height:350px;
z-index: 1;
margin-top: 5px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000;
text-align: justify;
}
.dragableBoxRight{
width:225px;
height:65px;
background-color:#C9F;
text-align:center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 200px;
position: relative;
line-height: 60px;
}
.dragableBox_1{
width:225px;
height:65px;
background-color:#FCF;
text-align:center;
position: relative;
line-height: 60px;
z-index: 1;
}
.dragableBox_2{
width:225px;
height:65px;
background-color:#C33;
text-align:center;
position: relative;
line-height: 60px;
z-index: 1;
}
div.dragableBoxRight{
height:65px;
width:225px;
background-color:#CCC;
float: left;
margin: 5px;
line-height: 50px;
}
El funciona bien, el problema es que si devuelvo la pregunta 2 a su posición inicial se pega de la pregunta 1 y deseo que se devuelva a su posición inicial.
¿Cómo puedo hacerlo?
Gracias por su ayuda