jquery - 如何结合可拖动，可拖放和可调整大小的jQuery UI？

我正在尝试组合所有这三个插件，但是在将resizeable（）添加到放置的项目时遇到了一些问题。

我有＃container1，其中的项目可以拖放并克隆到＃container2中。放入＃container2后，克隆的项目应可拖动到＃container2中并能够调整大小。拖放效果很好，但是当我添加$ canvasElement.resizable（）时，放置的元素的宽度和高度为0px。

$（函数（）{

$("#container1 img").draggable({
    helper: 'clone',
    cursor: 'move'
});

$("#container2").droppable({
    accept: 'img',
    drop: function (event, ui) {
        var $canvas = $(this);
        if (!ui.draggable.hasClass('canvas-element')) {
            var $canvasElement = ui.draggable.clone();
            $canvasElement.addClass('canvas-element');
            $canvasElement.resizable();
            $canvasElement.draggable({
                containment: '#container2'
            });
            $canvas.append($canvasElement);
            $canvasElement.css({
                left: (ui.position.left),
                top: (ui.position.top),
                position: 'absolute'
            });
        }
    }
});

}）;

最佳答案

看一下这个JQFAQ.com主题，这将帮助您结合ui-draggable，droppable和resizable。也有几个示例常见问题解答。