Arrastar, ocultar y expandible div

ceaped · #1 (**permalink**) 11/12/2015, 09:22

Buenos días
Cómo hago para que una div la pueda mover desde un botón tipo ventana Windows (minimizar, expandir y cerrar).

Pongo un ejemplo y la div que deseo que tenga estas propiedades es la superior la que contiene las fichas y que también se puedan arrastrar las fichas al diagrama.

Ejemplo

Gracias por su ayuda

peperafa · #2 (**permalink**) 11/12/2015, 10:08

Hola hermano,

Para la ventana es fácil en el div haces el diseño con css: con position absolute y z-index con los estilos que desees y en una función utiliza esto:

Dar posición en la pantalla
left y top

Dar tamaños
width y height

Ocultar
display:none

Mostrar
display:block

También se puede usar la propiedad visibility para mostrar u ocultar

Cambiando los estilos
$("#ventana").css({'display':'block', 'left':x, 'top':y, 'width':'150px', 'height': '50px'});

Y ya la función la llamas con el evento que quieras.

Para arrastrar los objetos checa este blog: http://www.html5rocks.com/es/tutorials/dnd/basics/ a ver
si te ayuda.

Saludos!!

ceaped · #3 (**permalink**) 11/12/2015, 11:29

Hola peperafa
Tu me puedes ayudar con algo que no logro resolver.
Mira el ejemplo que puse y dime como hago para cuando arrastre una de las fichas superiores la pueda bajar osea que el scroll del navegador baje verticalmente.

Gracias por tu ayuda

peperafa · #4 (**permalink**) 11/12/2015, 13:02

Con el estilo overflow: scroll en tu div le colocará el scroll;

ceaped · #5 (**permalink**) 11/12/2015, 13:36

Hola peperafa
mmm...eso no es.
¿En donde debería ir ese overflow?

Gracias por tu ayuda

peperafa · #6 (**permalink**) 11/12/2015, 13:51

Puedes colocarlo desde un archivo externo o directo en tu div, coloca el tamaño también:

css
#elDiv {
width: 150px;
height: 150px;
overflow: scroll;
}

html
<div id="tuDiv" class="elDiv"></div>

puede ser asi:

html
<div id="tuDiv" style="
overflow: scroll;
width: 150px;
height: 150px;">
</div>

En esta página hay un ejemplo sencillo: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

ceaped · #7 (**permalink**) 11/12/2015, 14:43

Hola peperafa
No no funciona, si tu ves el ejemplo que tengo lo que necesito es que cuando arrastre las fichas que están en el ejemplo que puse hacia abajo el scroll del navegador baja.
Acá no puedo aplicar el overflow.

Gracias por tu ayuda

peperafa · #8 (**permalink**) 11/12/2015, 16:13

Necesitas Jquery, ya te entendí te dejo un ejemplo de la funcion para mover el scroll hacia abajo, tu lo tienes que colocar en tu función donde empiezas a mover las fichas

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
function scrollWin() {
$('#Layer1').animate/*scroll que se movera en tu caso a lo mejor es html,body*/({
scrollTop: $("#aqui").offset().top/*Donde se movera*/
// scrollTop: 0 para mover hasta arriba
}, 2000/*tiempo que se movera en ml*/);
}
</script>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<div id="Layer1" style="width:100px; height:115px; overflow: scroll;">Aquí saldrá un scroll<br>
<br>
<p>texto</p><br>
<p>texto</p><br>
<p>texto</p><br>
<p>texto</p><br>
<p>texto</p><br>
<div id="aqui"></div>
<p>texto</p><br>
<p>texto</p><br>
<p>texto</p><br>
<p>texto</p><br>
<p>texto</p><br>
</div>
<br>
<p onClick="scrollWin()">click</p>

</body>
</html>

ceaped · #9 (**permalink**) 12/12/2015, 10:52

Hola peperafa
No me funciona. Mira lo que tengo.

Contenedor de las fichas que se arrastrarán:

Código HTML:

Ver original<div id="mainContainer">
    <div id="piezas">    
    <div id="dropContent">
    <div class="dragableBox" id="box1"><img src="images/pieza_13.png" alt="Título"></div>
    <div class="dragableBox" id="box2"><img src="images/pieza_18.png" alt="Título"></div>
    <div class="dragableBox" id="box3"><img src="images/pieza_10.png" alt="Título"></div>
</div>
</div>

El código que tu me pasas:

Código Javascript:

Ver original<script type="text/javascript">
function scrollWin() {
$('html').animate/*scroll que se movera en tu caso a lo mejor es html,body*/({
scrollTop: $(".dragableBox").offset().top/*Donde se movera*/
// scrollTop: 0 para mover hasta arriba
}, 2000/*tiempo que se movera en ml*/);
}
</script>

Gracias por tu ayuda

ceaped · #10 (**permalink**) 12/12/2015, 17:40

Hola
Como quito en el archivo "drag-drop-custom.js" la opción que cuando uno lo arrastre y lo suelte se devuelva?

Gracias por tu ayuda

peperafa · #11 (**permalink**) 14/12/2015, 10:09

Mira te pongo este ejemplo, guárdalo y haz la prueba:

Cita:

<!DOCTYPE HTML>
<html>
<head>
<title>Arrastrar y soltar</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
/*estilo general: resetear*/
* { margin: 0 auto; padding: 0; }
/*estilo de contenedores*/
#cont0 { width: 90%; height: 300px; }
#cont1 { width: 90%; height: 800px; background-color:lime; overflow: auto; }
#cont2 { width: 90%; height: 800px; background-color:skyblue; overflow: auto; }
</style>

<script type="text/javascript">
//Recoger elemento arrastrable//
function evdragstart(ev,el) { //ev= el evento, el=elemento arrastrado.
cont1=el.parentNode; //guardamos el elemento padre del elemento en una variable.
ev.dataTransfer.setData("text",ev.target.id); //guardamos datos del elemento.
$('html,body').animate/*scroll que se movera en tu caso a lo mejor es html,body*/({
scrollTop: $("#aqui").offset().top/*Donde se movera*/
// scrollTop: 0 para mover hasta arriba
}, 2000/*tiempo que se movera en ml*/);
}
//mientras se arrastra:
function evdragover (ev) { //ev=el evento.
ev.preventDefault(); //quitar comportamiento por defecto.
}
//Al soltar el elemento arrastrado
function evdrop(ev,el) { //ev=el evento; el=receptor de soltado
ev.stopPropagation(); //impedir otras acciones
ev.preventDefault(); //quitar comportamiento por defecto
var data=ev.dataTransfer.getData("text"); //recogemos datos del elemento
mielem=ev.target.appendChild(document.getElementBy Id(data)); //obtenemos el elemento arrastrado
cont1.appendChild(mielem); //ponemos el elemento arrastrado en el mismo sitio donde estaba.
mielem2=mielem.cloneNode(true); //creamos una copia del elemento arrastrado.
mielem2.setAttribute("draggable","false"); //impedimos que el nuevo elemento pueda volver a arrastrarse
el.appendChild(mielem2); //colocamos la copia en el receptor de soltado
}
</script>

<body>
<div id="cont0">


<div id="cont1" >

<div><p draggable="true" ondragstart="evdragstart(event,this)" id="e1">Arrastrame</p></div>
<span><img src="objetos/espana.gif" alt="españa"
draggable="true" ondragstart="evdragstart(event,this)" id="e4"/></span>
<span><img src="objetos/europa.gif" alt="europa"
draggable="true" ondragstart="evdragstart(event,this)" id="e5"/></span>
<span><img src="objetos/italia.gif" alt="italia"
draggable="true" ondragstart="evdragstart(event,this)" id="e6"/></span>
</div>


<div id="cont2" ondragover="evdragover(event)" ondrop="evdrop(event,this)">
<div id="aqui"></div>
</div>

</div>
</body>

Mas no te puedo ayudar, si en el drag-drop-custom.js se encuentra tu función pues tienes que agregar la función de bajar el scroll ahí.