可拖动的可调整大小在 Chrome 中不起作用答案

【问题标题】：Draggable Resizable not working in Chrome可拖动的可调整大小在 Chrome 中不起作用
【发布时间】：2012-02-09 13:54:02
【问题描述】：

我在 chrome 中将可调整大小和可拖动的图像一起工作时遇到了一些问题。我的页面侧面有一个（可拖动）图像列表，可以将其拖放到 div 上（图像被克隆）。放置的图像应该是可调整大小和可拖动的。我编写了以下 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 中生成以下代码，完美运行：

<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 中，元素被拖动和克隆，但它们没有被显示。从下面生成的代码可以看出这一点：

<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 中更改高度/宽度，但我相信会有更好的解决方案。

感谢您的帮助。

【问题讨论】：

尝试将 position:absolute 添加到容器元素
还是不行。这就是你说的可放置容器，对吧？

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-resizable

【解决方案1】：

诀窍是专门为 img 标签添加高度和宽度。如果没有那个 div 和图像高度被显式设置为零（但仅限于 chrome）。

【讨论】：