Question

我试图动态地为jQuery UI Resizable添加一个元素，一旦它被添加到以下内容中：

      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类的图像。单击insert-image（a href按钮）时，复制图像并将其附加到DOM。

这很好用。尝试为图像提供resizeable时会出现问题。

运行上面的代码时，插入DOM的img具有以下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>

使元素动态调整大小

1 个答案: