如何结合 jQuery UI 的可拖动、可放置和可调整大小？

Question

我正在尝试组合所有这三个插件，但我在将 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'
            });
        }
    }
});

});

Answer 1

看看这个JQFAQ.com主题，这将帮助你结合ui-draggable、droppable和resizable。还有一些常见问题解答示例。