¿Cómo puedo hacer que todas las 4 esquinas de mi div han de tamaño variable maneja con jQuery?

Estoy tratando de agregar un div onClick que es a la vez la posibilidad de arrastrar y de tamaño variable, con asas para el cambio de tamaño que la vid está en todas las 4 esquinas.

He sido capaz de hacer que el div se pueden arrastrar y agregar las asas… sin EMBARGO… Sólo la parte inferior, derecha y abajo-derecha-las esquinas de la div realmente funciona… la parte superior y otros rincones mostrar una flecha en hover… pero no cambiar el tamaño del div!?!?!

<script>

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable();

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>");
        var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>");

            eleHandleNE.appendTo(ele);
            eleHandleSE.appendTo(ele);
            eleHandleSW.appendTo(ele);
            eleHandleNW.appendTo(ele);

        //Append new div to the container div called mega_wrap
        $("#mega_wrap").append(ele);

   }); 
});

</script>

<div id="mega_wrap">
    <form class="form-wrapper cf">
            <input type="text" placeholder="Looking for inspiration..." required>
            <button type="submit">Search</button>
    </form>
</div>
No puedes simplemente utilizar las asas opción? api.jqueryui.com/resizable/#option-handles

OriginalEl autor DigitalMediaGuy | 2012-10-09

1 Kommentar

  1. 26

    Esta es la forma de poner las manos. No es necesario anexar handles explícitamente.

        ele.resizable({
           handles: 'n, e, s, w'
        }); 

    Ver jQuery de tamaño variable controla

    Gracias!!! Eso funcionó bien
    Si mi respuesta le sirve de ayuda, lo marca como respuesta 🙂
    Y para las esquinas, así que usted necesita: handles:'all'. Individual esquinas con ne, etc.
    O tal vez handles: 'n, e, s, w, se, ne, sw, nw'.
    Sí hombre, es que funciona muy muy bien! Gracias!

    OriginalEl autor Jashwant

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea