如何調整克隆的jQuery UI元素的大小（圖像）

Question

我特別需要克隆一個元素（圖像）並在容器內可拖動，並且一旦進入容器，仍保留其可拖動（但不能克隆）。

我只想將拖動到容器內的克隆元素重新調整大小，但是我無法使其正常工作。

我只能調整父元素的大小。 有什么方法只能.resize克隆的元素嗎？

有點奇怪但有效的示例： http : //jsfiddle.net/rGUma/4/

碼：

<div class="drag"><img src="..." /></div>
<div class="drag"><img src="..." /></div>
<div class="drag"><img src="..." /></div>
<div class="drop-zone"></div>


  <script>
    $(".drop-zone").droppable({
        accept: '.drag',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-drop-zone')) {
                $(this).append($clone.addClass('inside-drop-zone').draggable({
                     containment: '.drop-zone'
                }));
            }
        }
    });
    $(".drag").draggable({
        helper: 'clone'
    });

    //this works but I dont want it on outside elements
     $( '.drag' ).resizable({  
      helper: "ui-resizable-helper"
    });

     //this doesn't work on cloned images but what I want working       
    $( '.drop-zone img' ).resizable({  
      helper: "ui-resizable-helper"
    });        

    // '.inside-drop-zone img'  also doesnt work

});​

</script>

PS。 如果有人可以解釋為什么它不起作用，將不勝感激。

Answer 1

它不起作用，因為克隆從未設置為可調整大小。 .resizable僅適用於開頭存在的元素，不適用於您創建的任何新元素。

我將可調整大小的調用移至克隆部分，以將其應用於克隆。 這也意味着，根據您對源代碼的評論（ 更新的jsfiddle ），外部框的大小不可調整：

$(document).ready(function($) {

    $(".drop-zone").droppable({
        accept: '.drag',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-drop-zone')) {
                $(this).append($clone.addClass('inside-drop-zone').draggable({
                    containment: '.drop-zone'
                }));

                $clone.resizable({ //this works but I dont want it to on outside elements
                    helper: "ui-resizable-helper"
                });
            }
        }
    });
    $(".drag").draggable({
        helper: 'clone'
    });


    $('.drop-zone img').resizable({ //this doesn't work because its cloned "inside" but its what I want working
        helper: "ui-resizable-helper"
    });


    // '.inside-drop-zone img'  also doesnt work
    // 
});

Answer 2

只需使用：

$clone.children().resizable({
    helper: "ui-resizable-helper"
});

並且所有在class: drop-zone下的圖像都會重新調整大小。

Answer 3

克隆誕生時，將可調整大小的創建綁定到某種事件嗎？

$('.drop-zone').on('hover', '.drag', function() {
    $(this).resizable({  
       helper: "ui-resizable-helper"
    });
});