Formulario con div que incluye drago and drop

groupde · #1 (**permalink**) 11/11/2014, 15:48

Hola Compañeros.
Llevo horas tratando de entender como puedo agregar a un formulario una div que contiene un drag and drop de elementos. La idea es que al enviar el formulario esta división que contiene los elementos dragables los muestre en su ultima ubicación.
Soy nuevo en el foro y un poco novato en todo esto. Muchas de antemano.

ArturoGallegos · #2 (**permalink**) 11/11/2014, 21:27

y tu código es?

Aquí generalmente sin código no hay ayuda... no somos partidarios de jugar adivinanzas.

groupde · #3 (**permalink**) 12/11/2014, 08:11

Ok, este el el código. Gracias de antemano.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<style>
#contenedor: { width: 800px; height: 600px; margin: auto;}
#objeto1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#caja_principal { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#almacen {float: left; background-color: #e8e8e8; width: 300px; height: 500px; border: 1px solid #333; border-radius: 3px; }
#stage {float: left; background-color: #d1d1d1; width: 500px; height: 500px; border: 1px solid #333; border-radius: 3px;}
</style>

<script>
$(function() {
$( ".objeto1" ).draggable({
dragstar: function( event, ui ) {
return empezar(event);
}
});

$( ".objeto2" ).draggable({
dragstar: function( event, ui ) {
return empezar(event);
}
});
});
</script>
<body>

<section class="formulario">


<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" /><br/>
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="[email protected]" required="" /><br/>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea><br/>
<div id="stageplot" name="stageplot" >

<div id='contenedor' name="contenedor">
<div id='almacen'>
<div id="olakease">
<p style=text-align:left>· </p>
</div>

<div id="olakease2" class="objeto2">
<p>guitarra 2</p>
</div>
</div>
<div id='stage'><h1> STAGE </h1></div>
</div>
</div>

<br/>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>

</section>
</body>

ArturoGallegos · #4 (**permalink**) 12/11/2014, 13:31

Aplica el uso de eventos, en particular el de "stop"
http://jqueryui.com/draggable/#events

Haz que valide la posición en que se ha colocado, si lo mueve a X posición en Left en que este dentro de tu cuadro de campos a enviar, lo conviertes en un input, si esta del lado contrario lo conviertes en simple texto.

o bien en lugar de convertirlo en un input puedes tener campos ocultos y solo cambia su valor pero es básicamente la misma dinámica.

groupde · #5 (**permalink**) 12/11/2014, 16:00

Gracias Arturo, el dnd esta bien así para lo que lo necesito, el problema es que necesito enviarlo junto o dentro del cuerpo del mensaje que genera el formulario al ser enviado.
Gracias por tu ayuda nuevamente.

ArturoGallegos · #6 (**permalink**) 12/11/2014, 20:56

Yo no veo ningún problema.... o no debería existir, solo tienes que recoger los valores de la misma forma que lo haces con el resto de los campos...

Vamos tienes <p>guitarra 2</p>
usando el evento stop verificas que este dentro del cuadro de opciones a enviar y lo modificas a
<p><input type="hidden" name="xxx[]" value="guitarra 2" />guitarra 2</p>

si lo regresan a un área donde no deba enviarse lo regresas a
<p>guitarra 2</p>

así de simple, no veo complicación en recuperar ese input ya sea array o campos individuales.