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

问题描述

我在 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.

感谢您的帮助.

推荐答案

诀窍是专门为 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屋！