Foros del Web - Ver Mensaje Individual

ceaped · #12 (**permalink**) 06/03/2014, 05:50

Hola andresgarciadev
Mira el HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
 
    <head>
    <title>titulo</title>
        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if lt IE 9]>
    <script type="text/javascript">
    "'article aside footer header nav section time'".replace(/\w+/g,function(n){document.createElement(n)});
    </script>
    <![endif]-->
        
    <link rel="stylesheet" href="css/menu_superior.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/estilo_autoevaluaciones.css" media="screen" type="text/css">
    
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/drag-drop-custom.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    $('.pestana').hide().eq(0).show();
    $('.tabs li').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.pestana').hide();
    $('.tabs li').removeClass("selected");
    var id = $(this).find("a").attr("href");
    $(id).fadeToggle();
    $(this).addClass("selected");
    });
    });
    </script>
 
</head>
    
    <body>
 
    <section class="menu_superior">
        
    <ul class="tabs" id="unidad_1_nav">
    
    <li class="selected"><a href="#tab-1">menu 1</a></li>
    <li><a href="#tab-2">menu 2</a></li>       
    <li><a href="#tab-3">menu 3</a></li>
                
    <li><a href="#">menu 4</a>
    <ul class="subs">
    <li><a href="#" >SubMenu 1</a></li>
    <li><a href="#" >SubMenu 1</a></li>
    <li><a href="#" >SubMenu 1</a></li>
    </ul>
    </li>
                
    <li><a href="#">menu 5</a>
    <ul class="subs">
    <li><a href="#tab-4" >SubBotón 1</a></li>
    <li><a href="#" >SubMenu 2</a></li>
    <li><a href="#" >SubMenu 3</a></li>
    <li><a href="#" >SubMenu 4</a></li>
    </ul>
    </li>
      
    </ul> 
    </section>
  
    <div class="pestana" id="tab-1">
    <h2>Pestaña 1</h2>
    <p>texto 1...</p>
    </div>
    
    <div class="pestana" id="tab-2">
 
    <div id="container_auto">
    <h2>AUTOEVALUACIÓN</h2>
    
    <p>Texto...</p>
 
    
    <div id="preguntas">
    <div id="dropContent">
    <div class="dragableBox_1" id="box1">Arrastar 1</div>
    <div class="dragableBox_2" id="box2">Arrastar 2</div>
    <div class="dragableBox_3" id="box3">Arrastar 3</div>
    </div> 
    </div>
    
    
    <div class="pregunta_1">
    <div class="campo_texto">
 
    <p>Texto 1...</p>
    </div>
    </div>
    
    
    <div class="pregunta_2">
    <div class="campo_texto">
 
    <p>Texto 2...</p>
    </div
    ></div>
    
    
    <div class="pregunta_3">
    <div class="campo_texto">
 
    <p>Texto 3...</p>
    </div>
    </div>
    
     
        
    <div id="respuestas">
    <div id="box102" class="dragableBoxRight_1"><p>Arrastre acá la respuesta</p></div>
    <div id="box103" class="dragableBoxRight_2"><p>Arrastre acá la respuesta</p></div>
    <div id="box101" class="dragableBoxRight_3"><p>Arrastre acá la respuesta</p></div>
    </div>
    </div>
    
    <input type="button" value="Volver a jugar" onClick="parent.location.reload();" style="width: 200px; height: 20px; background-color: #FDEB62; color: #543F2A; cursor: pointer; border: 0px;  margin-top: 40px; margin-left: 500px;"/>
    
    </div>
    
    <div class="pestana" id="tab-3">
    <h2>Pestaña 3</h2>
    <p>texto 3...</p>
    </div>
    
    <div class="pestana" id="tab-4">
    <h2>Pestaña 4</h2>
    <p>texto 4...</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!='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='#FF0000';
    }
    if(targetId=='preguntas'){
        targetObj = targetObj.getElementsByTagName('DIV')[0];   
    }
    targetObj.appendChild(sourceObj);
}
 
 
 
var dragDropObj = new DHTMLgoodies_dragDrop();
 
 
dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addSource('box3',true);
 
 
 
dragDropObj.addTarget('box101','dropItems');
dragDropObj.addTarget('box102','dropItems');
dragDropObj.addTarget('box103','dropItems');
 
 
dragDropObj.addTarget('preguntas','dropItems');
 
dragDropObj.init();
</script>
    
</body>
</html>