Jquery se pueden arrastrar y tamaño variable

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 la línea de tamaño variable se saca, pero quiero que estas imágenes sean pueda arrastrar y cambiar de tamaño, consigo comportamientos divertido si I tratar de hacer el mismo elemento tiene dos atributos, ¿alguien saber una forma de hacer que esto funcione?

Gracias!

Answer 1

parece que es porque lo estás haciendo en una <img>, que jQueryUI envuelve en un <div>, y luego el componente arrastrable de la imagen que sucede dentro de la envoltura <div>.

trate de envolver el <img> en un <div> (que si labrado display:inline-block, habrá "abrazar" el tamaño de la imagen en ambos ejes X e Y), hacen que el <div> arrastrable (y por lo tanto la <img> incluidos estarán también), y hacer que el <img> se pueda redimensionar (y dado que el div abraza la imagen, todo queda bien).

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

Answer 2

tenía curiosidad, aquí está el código que es posible arrastrar y tamaño variable de trabajo. 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, me di cuenta, tomar o dejar, como no sé el trabajo implicado en el cambio de sus JS.

primero, todos los "arrastrables" que están siendo arrastrados 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: ""} describiendo la posición del objeto 'auxiliar' en relación con el 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(); 

Answer 3

Si se aplica la primera de tamaño variable, a continuación, puede aplicar el que pueden arrastrarse a los padres 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 4

de tamaño variable y se pueda arrastrar estaban causando todo tipo de problemas DOM cambio para mí. Hay un bug filed for this behavior; la solución temporal es aplicar el siguiente CSS, lo que funcionó para mí:

.element { 
    position: absolute !important; 
} 

Answer 5

por esta pregunta: Resizable, draggable object in jquery. Possible? si simplemente incluir jQuery-ui.css que va a funcionar. Solucionó mi problema cuando ninguno de ellos lo hizo. Mi código es simple:

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

Esto era arrastrable pero no redimensionable. Nada más funcionó. Agregar el CSS permitió el cambio de tamaño sin divs o código adicional.

Answer 6

arrastrables establece la posición en css a relativa, y los conjuntos de tamaño a absoluto ... al menos ese fue mi problema con "comportamientos divertidos" de los divs que establezco para ser arrastrables y redimensionables ... se mantuvieron en movimiento sin sentido en la ventana cuando cambié la posición de otra div ...

así que obligaron a la CSS para definir la posición: absoluta en cada evento de movimiento (arrastrar y cambiar el tamaño) y todo lo que tiene bien!

Answer 7

El código responsable de esto fue una solución para algo más: Github link que apunta a Bug 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 del tiempo: 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 fue efectivamente solo se actualizan una vez, hace 7 años: Updated Link

// 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