可拖动可调整大小在Chrome中不起作用 [英] Draggable Resizable not working in Chrome

问题描述

我有一个问题，使可调整大小和可拖动的工作在一个图像在铬。我的页面有一个（可拖动）图像的列表，可以放在div上（图像被克隆）。丢弃的图像应该可调整大小并拖动。我写了以下Javascript：

I am having some issue with making resizable and draggable work together on an image in chrome. My page has a list of (draggable) images on the side, which can be dropped on a div(the images are cloned). The dropped images should be resizable and draggable. I've written the following 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'
        });
      }
    }
  });
});

这将在Firefox中生成以下代码：完美工作：

This generates the following code in Firefox, which works perfectly:

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

然而，在chrome中，这些元素正在被拖动和克隆，但它们没有被显示。这是很明显的，从以下代码生成：

In chrome however, the elements are being dragged and cloned, but they are not being displayed. This is obvious from the following code is generated:

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

但是，我不明白为什么图像的宽度和高度以及其对应的外部div即将到达0px。一个简单的解决方案将会改变javascript中的高度/宽度，但我相信会有更好的解决方案。

However, I am failing to understand why the width and height of the images and that of its corresponding outer div is coming to 0px. An easy solution would to be change the height/width from within javascript, but I'm sure there would be a better solution.

感谢您的帮助。 >

Thanks for your help.

推荐答案

诀窍是将img标签的高度和宽度专门添加。没有这样，div和图像高度被明确地设置为零（但仅在chrome中）。

The trick was to specifically add the height and width to the img tag. Without that the div and the image height is being explicitly set to zero(but only in chrome).

这篇关于可拖动可调整大小在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！