如何调整克隆的jQuery UI元素的大小(图像) [英] How do you resize a cloned jQuery UI element (image)

问题描述

我特别需要克隆一个元素(图像)并在容器内可拖动，并且一旦进入容器，仍保留其可拖动(但不能克隆).

I have some particular need to clone an element (image) and be draggable inside a container and still retain its draggable (but not clone) once inside.

我只希望将克隆的元素拖到容器中以重新调整其大小，但我无法使其正常工作.

I want to make only the cloned elements dragged inside the container to also be re-sizable, but I cannot get it to work.

我只能让父元素调整大小.有什么方法可以只.resize克隆的元素吗?

I can only get the parent element to resize. Is there any way to only .resize the cloned element?

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

Somewhat wonky but working example: 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.如果有人可以解释为什么它不起作用，将不胜感激.

ps. If someone can explain why it doesn't work it would be greatly appreciated.

推荐答案

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

It doesn't work because the clone is never set to be resizable. The .resizable is only applied to the elements that exist in the beginning, not to any new elements you create.

我将可调整大小的调用移至克隆部分，以将其应用于克隆.这也意味着，根据您在源中的注释(更新的jsfiddle )，外部框的大小不可调整:

I move the resizable call into the cloning portion to apply it to the clone. This also means that the outside boxes are not resizable, per your comments int the source (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
    // 
});

这篇关于如何调整克隆的jQuery UI元素的大小(图像)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！