如何结合使用jQuery UI draggable，droppable和resizable？

Question

我试图将所有这三个插件组合在一起，但我在将丢弃的项目添加resizeable（）方面遇到了一些问题。

我的＃container1包含可以删除并克隆到＃container2中的项目。在被放入＃container2之后，克隆的项目应该可以拖放到＃container2中并且能够调整大小。拖放效果很好但是当我添加$ canvasElement.resizable（）时，删除的元素得到宽度和高度= 0px。

$（function（）{

$("#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'
            });
        }
    }
});

}）;

Answer 1

看看这个JQFAQ.com主题，这将有助于您将ui-draggable，droppable和resizable组合在一起。还有一些示例常见问题解答。