jquery - 如何调整克隆的 jQuery UI 元素(图像)的大小

Question

我有一些特殊的需要来克隆一个元素(图像)并在容器内可拖动，并且在进入容器后仍然保留其可拖动(但不能克隆)。

我只想使拖动到容器内的克隆元素也可以调整大小，但我无法让它工作。

我只能让父元素调整大小。有没有办法只调整克隆元素的大小？

有点奇怪但有效的示例: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

它不起作用，因为克隆从未设置为可调整大小。 .ressized 仅适用于开头存在的元素，不适用于您创建的任何新元素。

我将可调整大小的调用移至克隆部分，以将其应用于克隆。这也意味着外部框的大小不可调整，根据您对源代码的评论( updated 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
    // 
});