我正在尝试组合所有这三个插件,但是在将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。也有几个示例常见问题解答。

08-19 11:08