Как изменить размер клонированного элемента пользовательского интерфейса jQuery (изображение)

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>

пс. Если кто-то может объяснить, почему это не работает, это будет с благодарностью.

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"
    });
});