可拖動的可調整大小在Chrome中不起作用

我在製作可調整大小和可拖動的圖片時出現了一些問題。我的頁面上有一列（可拖動）圖像，可以放在div上（圖像被克隆）。丟棄的圖像應該可調整大小並可拖動。我已經寫了下面的JavaScript：可拖動的可調整大小在Chrome中不起作用

$(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內部的高度/寬度，但我相信會有更好的解決方案。

感謝您的幫助。

來源

2012-02-09 Wahaj Ali

嘗試添加位置：絕對到容器元素 – Evan 2012-02-09 14:09:13

仍然不起作用。這是你正在談論的可丟棄容器，對吧？ – 2012-02-09 14:13:04

訣竅是專門將高度和寬度添加到img標記。沒有那個div和圖像高度被明確地設置爲零（但僅在鉻中）。

來源

2012-02-10 14:43:22

可拖動的可調整大小在Chrome中不起作用

回答

相關問題