jquery - 使元素可动态调整大小

Question

我试图在将元素jQuery UI Resizable添加到 dom 后动态地赋予它以下内容：

      insert.click(function(e) {
        var selectedImage = $(this).parent().find('.gallery-item.active');
        var htmlImage = selectedImage.find('img');


        var selectedDiv = $('.zone.selected .drag-image');
        //selectedDiv.clone().append(htmlImage);

        var insertedImage = htmlImage.clone();
        var resized = insertedImage.resizable();
        console.log(selectedDiv);
        console.log(resized);
        resized.appendTo(selectedDiv);

      });

    });

这是做什么的，它会找到一个已被点击并给出active类的图像。单击（a href 按钮）时insert-image，复制图像并将其附加到 DOM。

这工作正常。尝试为图像提供resizeable.

运行上述代码时，img插入到 DOM 中的 HTML 如下；

它似乎不包括任何显示可调整大小的箭头图像的 UI 代码，即

<div class="ui-resizable-handle ui-resizable-e" style=""></div>
<div class="ui-resizable-handle ui-resizable-s" style=""></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div>

有没有办法可以添加所有使元素可调整大小的代码？

Answer 1

我刚刚重新生成了你的代码，它似乎工作正常，看看这个 jsFiddle：http: //jsfiddle.net/gYdMV/

更新点击事件：http: //jsfiddle.net/gYdMV/1/

代码：

var insertedImage = $('#htmlImage').clone();
var resized = insertedImage.resizable();
insertedImage.appendTo($('#content'));

<div id="content">
<div id="htmlImage">
    hi
</div>
</div>