Arrastrar y soltar objetos + MySQL

jkfran · #1 (**permalink**) 18/10/2008, 17:10

Bueno lo pongo en PHP por que es el lenguaje que he usado hasta el momento, pero creo que sera con otro lo que quiero.

Lo que quiero hacer es un sistema en el que salgan dos "recuadros" a cada lado de la pantalla con imágenes en cada uno (en el de la derecha sadran según los datos que ponga en la base de datos) y que se pueda pasar una imagen de un lado a otro y al pasarla se realice un cambio en la base de datos.

jkfran · #2 (**permalink**) 18/10/2008, 19:00

he estado haciendo pruebas al parecer es con ajax

http://www.crysfel.com/index.php/2007/10/31/drag-and-drop-con-mootools/

No obtenido nada interesante me pueden ayudar plis

GatorV · #3 (**permalink**) 18/10/2008, 23:40

Tema trasladado a Javascript.

jkfran · #4 (**permalink**) 07/02/2010, 05:54

alguien podría darme un ejemplo o algo?

jackson666 · #5 (**permalink**) 07/02/2010, 07:53

- http://davidwalsh.name/mootools-drag-drop-lock
- http://snook.ca/archives/javascript/mootools_drag_a
- http://demos111.mootools.net/DragDrop

No debes haber buscado muy bien...

jackson666 · #6 (**permalink**) 07/02/2010, 09:03

Luego, con la ultima version de mootools podrias hacer algo asi:

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Jackson666" />
    <title>Mootools FX - Drag and Drop</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
 window.addEvent('domready', function(){
    var w = 200;
    var h = 150;
    var drag = new Drag.Move('draggable',{
        
        droppables: '#drop', 
        onDrop: function(el, droppable){
            
            if(droppable){
                w += 60;
                h += 10;
                droppable.set('morph', {
                                    transition: 'bounce:out', 
                                    duration: 1000
                                   });
            
                droppable.morph({ width : w, height : h });
                $('draggable').morph({
                                        'top' : 35, 
                                        'left' : 40 
                                     });
            
                el.clone().cloneEvents(el).inject(droppable).morph('#draggable');
                el.setStyles({
                            'margin' : '5px 0 0 30px',
                            'float' : 'left'
                            });
            }
        }
       });
    });
</script>
<style type="text/css">
 #draggable{
    width: 60px;
    height: 50px;
    background-color: black;
    cursor: move;
    position: relative;
    z-index: 9998;
    color: white; 
    padding: 10px;
}
 
 #drop{
    width: 650px;
    height: 100px;
    position: absolute;
    top: 35px;
    right: 40px;
    background-color: #7fcfff; 
    color: white;
    border: 2px solid #000000;  
 }
</style>
</head> 
<body>
<div id="draggable">Drag me!</div>
<div id="drop">
<h3 align="center" style="margin: 0; padding: 0;">Drop here!</h3>
</div>
</body>
</html>

jkfran · #7 (**permalink**) 07/02/2010, 14:01

El problema es que no se como incluir mysql en los scripts para guardar los cambios

jackson666 · #8 (**permalink**) 07/02/2010, 14:17

Es que con el ejemplo que te di ya esta...
Fijate que haciendo una funcion mas (la cual sera con ajax) y agregandola al evento onDrop, ya esta...

nfo · #9 (**permalink**) 17/04/2012, 07:25

yo tambien estoy interesado en esto como lo habeis echo