jquery - ejemplos - El tamaño ajustable no funciona en Chrome

resizable javascript

Question

Estoy teniendo problemas para hacer que el trabajo redimensionable y arrastrable funcione en una imagen en cromo. Mi página tiene una lista de imágenes (arrastrables) en el lateral, que pueden soltarse en un div (las imágenes están clonadas). Las imágenes caídas se pueden cambiar de tamaño y arrastrar. He escrito el siguiente Javascript:

$(function() {
  $(".scrollable").scrollable();
  $(".draggable").draggable({
    helper: ''clone'',
    appendTo: ''body''
  });

  $("#canvas").droppable({
    accept: ''.draggable'',
    drop: function(e, ui){
      if (ui.draggable.attr("class").indexOf(''item'') == -1){
        var clone = $(ui.draggable).clone();
        clone.removeClass("ui-draggable draggable");
        clone.addClass(''item'');
        $(this).append(clone);
        $(''.item'').resizable({
          containment: ''parent'',
          aspectRatio: true
        }).parent().draggable({
          containment: ''parent''
        });
      }
    }
  });
});

Esto genera el siguiente código en Firefox, que funciona perfectamente:

<div id="canvas" class="white-box ui-droppable">
  <div class="ui-wrapper ui-draggable" style="overflow: hidden; position: relative; width: 126px; height: 41px; top: 104px; left: 211px; margin: 0px;">
    <img class="item ui-resizable" src="/images/qr-code/description-sm.png?1328705570" alt="Description-sm" style="resize: none; position: static; display: block; height: 41px; width: 126px;">
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div>
  </div>
</div>

Sin embargo, en Chrome, los elementos se arrastran y se clonan, pero no se muestran. Esto es obvio a partir del siguiente código generado:

<div id="canvas" class="white-box ui-droppable">
  <div class="ui-wrapper ui-draggable" style="overflow-x: hidden; overflow-y: hidden; width: 0px; height: 0px; top: auto; left: auto; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; position: relative; ">
    <img alt="Description-sm" class="item ui-resizable" src="/images/qr-code/description-sm.png?1328705570" style="resize: none; position: static; zoom: 1; display: block; height: 0px; width: 0px; ">
    <div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
  </div>
</div>

Sin embargo, no estoy entendiendo por qué el ancho y la altura de las imágenes y el de su div externo correspondiente están llegando a 0px. Una solución fácil sería cambiar el alto / ancho desde javascript, pero estoy seguro de que habría una mejor solución.

Gracias por tu ayuda.

Answer 1

El truco consistía en agregar específicamente el alto y el ancho a la etiqueta img. Sin eso, div y la altura de la imagen se establecen explícitamente en cero (pero solo en cromo).