example - resizable jquery

Jquery Draggable Y redimensionable

Question

function makeResourceDrag(arrIndexID) {

    $(''#imgA'' + arrIndexID).resizable();

    $(''#imgA'' + arrIndexID).draggable({
        start: function(event, ui) {
            isDraggingMedia = true;
        },
        stop: function(event, ui) {
            isDraggingMedia = false;

            // Set new x and y
            resourceData[arrIndexID][4] = Math.round($(''#imgA'' + arrIndexID).position().left / currentScale);
            resourceData[arrIndexID][5] = Math.round($(''#imgA'' + arrIndexID).position().top / currentScale);

        }
    });

}

Esto funciona bien si se quita la línea que se puede cambiar de tamaño, pero quiero que estas imágenes se puedan arrastrar y que se puedan cambiar de tamaño. Si intento hacer que el mismo elemento tenga ambos atributos, ¿alguien sabe una manera de hacer que esto funcione?

¡Gracias!

Answer 1

El código responsable de esto fue una solución para otra cosa: el enlace de Github que apunta al error 1749 .

// bugfix for http://dev.jquery.com/ticket/1749
if (el.is(''.ui-draggable'') || (/absolute/).test(el.css(''position''))) {
    el.css({ position: ''absolute'', top: iniPos.top, left: iniPos.left });
}

La solución en sí existe desde el principio de los tiempos: Github Bug Fixed link for Jquery

// bugfix #1749
if (el.is(''.ui-draggable'') || (/absolute/).test(el.css(''position''))) {

    // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
    var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css(''position'')) && !(/relative/).test(el.parent().css(''position''));
    var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ? o.documentScroll.left : 0;

    el.css({ position: ''absolute'', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
}

Y efectivamente se acaba de actualizar una vez, hace 7 años: Enlace actualizado

// bugfix #1749
        // bugfix for http://dev.jquery.com/ticket/1749
        if (el.is(''.ui-draggable'') || (/absolute/).test(el.css(''position''))) {
            // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
            var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css(''position'')) && !(/relative/).test(el.parent().css(''position''));
            var dscrollt = sOffset ? this.documentScroll.top : 0, dscrolll = sOffset ? this.documentScroll.left : 0;

            el.css({ position: ''absolute'', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
            el.css({ position: ''absolute'', top: iniPos.top, left: iniPos.left });
        }

Referencia: jquery link

Answer 2

El tamaño y la capacidad de arrastre se estaban causando todo tipo de problemas de cambio de DOM para mí. Hay un error archivado para este comportamiento ; la solución temporal es aplicar el siguiente CSS, que funcionó para mí:

.element {
  position: absolute !important;
}

Answer 3

Parece que es porque lo estás haciendo en un <img> , que jqueryui envuelve en un <div> , y luego el componente arrastrable de la imagen sucede dentro del envoltorio <div> .

Intente envolver el <img> en un <div> (que si se display:inline-block estilo display:inline-block , "abrigará" el tamaño de la imagen en los ejes x e y), haga que el <div> pueda arrastrar (y por lo tanto el <img> lo será), y hacer que el tamaño de <img> redimensione (y como el div abraza la imagen, todo encaja perfectamente).

Ejemplo de trabajo: http://jsfiddle.net/vrUgs/2/

Answer 4

Por esta pregunta: Objeto redimensionable, arrastrable en jQuery. ¿Posible? Si simplemente incluye jquery-ui.css, funcionará. Resolvió mi problema cuando ninguno de estos lo hizo. Mi código es simple:

$(element).resizable().draggable();

Esto era arrastrable pero no redimensionable. Nada más funcionó. La adición de CSS permitió cambiar el tamaño sin divs ni código adicionales.

Answer 5

Si aplica el tamaño variable primero, puede aplicar el elemento arrastrable al padre del img; que es el nuevo div creado mediante la aplicación de tamaño variable.

chartImg.resizable({ animate: true,
            ghost: true,
            handles: ''n,s,e,w,ne,se,nw,sw'',
            start: function (event, ui) { startResize(event, ui); },
            resize: function (event, ui) { monitorResize(event, ui); },
            stop: function (event, ui) { stopResize(event, ui); }
        }).parent().draggable({ containment: $(".chartPane") });

Answer 6

Tenía curiosidad, aquí está el código de trabajo que se puede arrastrar y cambiar de tamaño. jQuery:

jQuery(document).ready(function(event){
   jQuery(".img").draggable().find("img").resizable();
});

html:

<div class="img">
  <img alt="" src="images/hard-disk-fingerprint.jpg"/>
</div>

otras cosas que noté, lo tomas o lo dejas, ya que no conozco el trabajo que implica cambiar tu JS.

Primero, todos los ''draggables'' que se están arrastrando obtienen una clase de ''.ui-draggable-dragging'' que, potencialmente, puede usar para su lógica ''isDraggingMedia''.

segundo, para obtener la posición actual con precisión, recomiendo usar ui.offset {top: "", left: ""}, posible alterado con la ui.position {top: "", left: ""} que describe la posición de el objeto "auxiliar" relativo al elemento que se está arrastrando.

 $(''#div holding imgA+arrindexid'').draggable({stop:function(event, ui){
//isDraggingMedia = true;  
//replace this with a $().is(ui-draggable-dragging) check if possible where it matters in //your other javascript.
                  // Set new x and y
                    resourceData[arrIndexID][4] = Math.round(ui.offset.left / currentScale);
                    resourceData[arrIndexID][5] = Math.round(ui.offset.top / currentScale);
    }}).find(''img'').resizable();