如何调整克隆的 jQuery UI 元素的大小（图片）

Posted 2023-02-22

【中文标题】如何调整克隆的 jQuery UI 元素的大小（图片）

【英文标题】：How do you resize a cloned jQuery UI element (image)

【发布时间】：2012-04-06 15:08:52

【问题描述】：

我有一些特别需要克隆一个元素（图像）并在容器内可拖动，并且在容器内仍然保留其可拖动（但不能克隆）。

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

我只能让父元素调整大小。有没有办法只 .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。如果有人能解释为什么它不起作用，将不胜感激。

【参考方案1】：

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

我将可调整大小的调用移动到克隆部分以将其应用于克隆。这也意味着外部框不可调整大小，根据您的 cmets in 源 (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
    // 
);

【参考方案2】：

在克隆出生时将可调整大小的创建绑定到某种事件？

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

【参考方案3】：

只需使用：

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

class: drop-zone 下的所有图片都将重新调整大小。