2

クロムの画像でサイズ変更可能とドラッグ可能を一緒に機能させることに問題があります。私のページの側面には（ドラッグ可能な）画像のリストがあり、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内から高さ/幅を変更することですが、より良い解決策があると確信しています。

ご協力いただきありがとうございます。

4

1 に答える 1

2

秘訣は、imgタグに高さと幅を具体的に追加することでした。それがないと、divと画像の高さは明示的にゼロに設定されます（ただし、クロムのみ）。

于 2012-02-10T14:43:22.273 に答える