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 elimina la línea redimensionable, pero quiero que estas imágenes se puedan arrastrar y redimensionar, obtengo comportamientos divertidos si trato de hacer que el mismo elemento tenga ambos atributos, ¿alguien sabe cómo hacer que esto funcione?
¡Gracias!
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 ocurre dentro del envoltorio <div> .
Intente envolver el <img> en un <div> (que si tiene el estilo display:inline-block , "abrazará" el tamaño de la imagen en los ejes x e y), haga que el <div> se pueda arrastrar (y por lo tanto el <img> adjunto <img> también lo estará), y haga que el <img> sea redimensionable (y dado que el div abraza la imagen, todo encaja muy bien).
Ejemplo de trabajo: http://jsfiddle.net/vrUgs/2/
Redimensionable y arrastrable me estaban causando todo tipo de problemas de cambio de DOM. Hay un error archivado para este comportamiento ; la solución temporal es aplicar el siguiente CSS, que funcionó para mí:
.element { position: absolute !important; }Tenía curiosidad, aquí hay un 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é, tómalo o déjalo, ya que no sé el trabajo involucrado en cambiar tu JS.
primero, todos los 'arrastrables' que se arrastran obtienen una clase de '.ui-draggable-dragging' que puede usar para su lógica 'isDraggingMedia' potencialmente.
segundo, para obtener la posición actual con precisión, recomiendo usar ui.offset{top:"",left:""}, posiblemente modificado con ui.position{top:"",left:""} que describe la posición de el objeto 'ayudante' 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();