Problemas con Drag

ceaped · #1 (**permalink**) 28/10/2013, 09:37

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">
<HTML>
 
<HEAD>
    <title>Título</title>
    
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css">
        
    <script type="text/javascript" src="js/drag-drop-custom.js"></script>
    
</head>
 
 
<body>
    
    <div id="container">
        <h2>Texto...</h2>
        
    <div id="contenedor_preguntas">
    
        <div class="pregunta_1">
        <div class="campo_texto">Texto 1</div>
        <div class="dragableBox_1" id="box1">Pregunta 1
        </div></div>
        
        <div class="pregunta_2">
        <div class="campo_texto">Texto 2</div>
        <div class="dragableBox_2" id="box2">Pregunta 2
        </div></div>
            
    </div>
        
    <div id="respuestas">
    <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>
    </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();
</script>
 
 
</body>
</html>

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