Botón para reiniciar juego "Drag'n drop"

ceaped · #1 (**permalink**) 03/03/2014, 06:11

Buenos días
Deseo utilizar este juego:

http://www.dhtmlgoodies.com/scripts/...ag-drop-3.html

¿Cómo hago que cuando arrastre cada opción las vuelva a poner en en "Capitals" o mejor dicho volver a jugarlo?.

Gracias por su ayuda

ceaped · #2 (**permalink**) 04/03/2014, 07:14

uyyy ya me he roto la cabeza y nada que me da este asunto...

andresgarciadev · #3 (**permalink**) 04/03/2014, 11:11

pues.... con el evento mouseup de la clase dragableBox tendrias q verificar q todas las cajas con la clase dragableBoxRight contengan un child con la clase dragableBox... si eso es true coges esos child los almacenas, eliminar de alli y los vuelves a copiar esos almacenados a ese div con id capitals
bueno.. esa seria la logica q se me ocurriria... ahora q si lo q necesitas es el codigo dime XD

ceaped · #4 (**permalink**) 04/03/2014, 12:11

Hola andresgarciadev
Me puedes indicar como sería.

Gracias por tu ayuda

andresgarciadev · #5 (**permalink**) 04/03/2014, 13:00

hmmm pues no c como probarlo pero creo q seria algo asi xD

Código Javascript:

Ver original$(".dragableBox").mouseup(function(){
    if($("#dropContent").find(".dragableBox").length == 0){
        var box = $(".dragableBox");
        $(".dragableBox").remove();
        $("#dropContent").append(box);
    }
});

no estoy seguro del todo si q funcione pero algo asi seria e.e
con eso al poner todos en una de la cajas de la derecha todas volverian al inicio.... claro q si quieres q suceda cuando pase algo tendrias q agregar otra condicion al
if($("#dropContent").find(".dragableBox").length == 0){

Panino5001 · #6 (**permalink**) 04/03/2014, 13:22

Una posibilidad:

Código:

<input name="reiniciar" type="button" onclick="location.reload();" value="reiniciar" />

ceaped · #7 (**permalink**) 05/03/2014, 08:03

Hola
andresgarciadev y Panino5001

La opción que me da "Panino5001" no aplica para lo que necesito ya que esto sí me actualiza pero lo que hace es devolverme al principio (actualiza el avegador), yo necesito es que me actualice la pestaña (mi navegación es por pestañas)

Acá tengo un ejemplo:

http://jsfiddle.net/jtLU9/3/

1. Si yo deseo actualizar una de las pestañas se me devuelve a la primera.

Gracias por su ayuda

andresgarciadev · #8 (**permalink**) 05/03/2014, 10:59

y lo que to dije que error te dio :c?

ceaped · #9 (**permalink**) 05/03/2014, 11:52

Hola andresgarciadev
¿Tu código lo pongo y cómo sería el botón que hace que se actualice la pestaña?

Gracias por tu ayuda

andresgarciadev · #10 (**permalink**) 05/03/2014, 12:07

lo hice con mauseup por que mencionaste que se active al dejar el ultimo... pero si quieres con un boton seria agregar un boton algo asi

Código HTML:

Ver original<input type="button" id="idboton">

y que el jquery sea

Código Javascript:

Ver original$(".idboton").click(function(){
        if($("#dropContent").find(".dragableBox").length == 0){
            var box = $(".dragableBox");
            $(".dragableBox").remove();
            $("#dropContent").append(box);
        }
    });

eso mas q actualizar pestaña simplemente los regresaria al div de la izquierda

ceaped · #11 (**permalink**) 05/03/2014, 12:54

Hola andresgarciadev
Se que no está dentro de las políticas del foro pero es que el ejemplo pero es muy largo.
Me puedes dar algún correo yo te paso el ejemplo para que me entiendas.

Gracias por tu ayuda

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>

andresgarciadev · #13 (**permalink**) 06/03/2014, 12:05

es q no entiendo muy bien cual es el problema xD ya te puse el codigo q deberia hacerlo funcionar.... o dime q no sale... aunque en lo que te pase tengo un error xD use . para un id :c... es

Código Javascript:

Ver original$("#idboton").click(function(){
            if($("#dropContent").find(".dragableBox").length == 0){
                var box = $(".dragableBox");
                $(".dragableBox").remove();
                $("#dropContent").append(box);
            }
        });

ceaped · #14 (**permalink**) 06/03/2014, 12:33

Hola andresgarciadev
¿El código que pones cómo lo utilizo con un botón?
Para que actualice sólo el "Drag'n drop" (la pestaña)

Gracias por tu ayuda

Nota: te puedo enviar un ejemplo si deseas.

andresgarciadev · #15 (**permalink**) 06/03/2014, 13:51

pero el codigo que te paso solo regresaria todo a como era al comienzo ... asi q cual seria la diferencia con actualizar la pestaña?
otra forma seria guardar el html en una variable y agregarlo al apretar el boton e.e

ceaped · #16 (**permalink**) 06/03/2014, 14:09

Hola andresgarciadev
Mira yo tengo el sistema de navegación por pestañas.
En la pestaña 2 tengo un juego "Drag'n drop".
Cuando la persona termine de arrastar si desea volver a jugar deseo poner un botón para que el "Drag'n drop" vuelva al comienzo.
jejeje...creo que la mejor manera es enviarte un ejemplo para que sea mas claro...

Gracias por tu ayuda

ceaped · #17 (**permalink**) 08/03/2014, 08:59

Hola andresgarciadev
Acá subo el ejercicio te que digo

http://jsfiddle.net/9LePv/

1. Cuando navego por las pestañas y por ejemplo estoy en la pestaña 3 y actualizo el navegador (F5) se devuelve a la pestaña 1. Yo deseo que se actualice la pestaña en la que este.

2.En la pestaña 2 puse el juego draga - drop cuando la persona acaba de arrastra y desee volver a jugar por medio de un botón vuelvan a la posición inicial.

3. Que cuando haga el arrastre se quede anclada cada una hasta que acabe de arrastrar las 3 y que solo pueda volver a jugar cuando presione el botón "volver a jugar".

Gracias por tu ayuda