Estoy construyendo un sitio que permite a los usuarios crear una página html que pueden ser guardados y compartidos en otro sitio. Quiero que ellos sean capaces de cambiar el tamaño y arrastre los elementos de la página. Puedo hacer esto con jQuery, pero no estoy seguro de cómo me, a continuación, guarde eso para que cuando la página se ve en otros lugares, se ve la misma.

No he decidido aún cómo almacenar la información de la página, pero lo que estoy pensando es que puede almacenar cada elemento en la base de datos junto con su posición absoluta, y su contenido. ¿Suena como un buen plan?

Si es así, ¿cómo puedo obtener la posición de la div, para pasar a php para que pueda ser salvo?

Gracias.

OriginalEl autor Sharon | 2011-03-14

2 Comentarios

  1. 13

    JQueryUI de tamaño variable tiene un evento llamado resize que puede utilizar:

    var resposition = '';
    
    $('#divresize').resizable({
       //options...
       resize: function(event,ui){
          resposition = ui.position;
       }
    });

    Lo mismo ocurre con JQueryUI la posibilidad de arrastrar y su evento drag:

    var dragposition = '';
    
    $('#divdrag').draggable({
       //other options...
       drag: function(event,ui){
          dragposition = ui.position;
       }
    });

    resposition y dragposition va a ser matrices. Usted puede ver aquí: http://jsbin.com/uvuzi5

    EDICIÓN: mediante un formulario, puede guardar dragposition y resposition oculto entradas

    var inputres = '<input type="hidden" id="resposition" value="'+resposition.left+','+resposition.top+'"/>'
    $('#myform').append(inputres);
    var inputdrag = '<input type="hidden" id="dragposition" value="'+dragposition.left+','+dragposition.top+'"/>'
    $('#myform').append(inputdrag);

    Y en el archivo PHP para manejar la forma:

    $dragposition = $_GET['dragposition'];
    $resposition = $_GET['resposition'];
    $dragposition = explode(',',$dragposition);
    $resposition = explode(',',$resposition);

    Finalmente, ambas variables deben ser matrices con top y left atributos:

    $dragposition => [top,left] attributes from draggable
    $resposition => [top,left] attributes from resizable
    Gracias, eso es útil. ¿Cómo puedo guardar esas posiciones cuando me guarde la página? Supongamos que el usuario hace todo esto y luego hacer clic en ‘Guardar’… ¿cómo puedo obtener el formulario para pasar de la posición y el tamaño de los elementos?
    Puedo editar mi propia respuesta. Espero te sirva de ayuda 🙂
    Gracias, que hace que sea más clara. Va a darle una oportunidad! Gracias de nuevo, yo realmente aprecio su ayuda.
    Sin embargo me gusta esta respuesta tanto, yo no puedo llegar a trabajar con el de tamaño variable. Incluso no en su ejemplo. Lo que tengo que hacer, es obtener el ancho y la altura de la div. Cuando llego a los puestos de trabajo que no debe ser duro, aunque.

    OriginalEl autor Fran Verona

  2. 0

    usted tiene que guardar la posición en algún lugar para que usted puede conseguir la posición
    los detalles cuando la próxima vez que abra la página.

    opción 1: puede almacenar los elementos html de la posición de los detalles en «localStorage» de su navegador por defecto de almacenamiento.
    Ejemplo: Demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Dashboard</title>
    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/css/jquery-ui.min.css">
    <script src="dist/js/jquery-ui.min.js"></script>
    </head>
    <body>
    <script>
    var positions = JSON.parse(localStorage.positions || "{}");
    $(function() {
    var d = $("[id=draggable]").attr("id", function(i) {
    return "draggable_" + i
    })
    $.each(positions, function(id, pos) {
    $("#" + id).css(pos)
    })
    d.draggable({
    containment: "#wrapper",
    scroll: false,
    stop: function(event, ui) {
    positions[this.id] = ui.position
    localStorage.positions = JSON.stringify(positions)
    }
    });
    });
    </script>
    <div id="wrapper">
    <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div1</div>
    <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div2</div>
    <div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div3</div>
    </div>
    </body>
    </html>

    opción 2: puede almacenar los elementos html de la posición de los detalles en «la base de datos»

    Podríamos el código de la API? Guardar en la base de datos?

    OriginalEl autor Juned Ansari

Dejar respuesta

Please enter your comment!
Please enter your name here