可拖动的可放置-放置时保持在原位

Question

到目前为止，这是我可拖动，可拖放，可调整大小的功能的代码：

 var cont1 = $(this.el).find('.image');
    var cont2 = $(this.el).find('#container2');
    console.log(cont1);
    $(cont1).draggable({
        helper: 'clone',
        cursor: 'move',
        revert: 'true'
    });

    $(cont2).droppable({
        accept: 'img',
        drop: function(event, ui) {
            var $canvas = $(this);
            var $container = $('<div>');

            if (!ui.draggable.hasClass('canvas-element')) {
                var $canvasElement = ui.draggable.clone();
                $canvasElement.addClass('canvas-element');

                $container.draggable({
                    cursor: "move",
                    // delay: 1000,
                    scroll: false
                            // containment: "parent"
                }).resizable({
                    //containment: "parent",
                    handles: 'n, e, s, ne, nw, se, sw',
                    aspectRatio: true
                });

                $container.append($canvasElement).prependTo(cont2);

                $canvasElement.css({
                    left: $container.left,
                    top: $container.top,
                    position: 'relative',
                    height: '100%',
                    width: '100%'
                });
                //$canvasElement.css('left', ui.position.left-80+'px').css('top', ui.position.top-80+'px').appendTo(this);
            }
        }
    });

这是jsFiddle。

我想要实现的是将放置的图像保留在放置位置。

还有其他一些问题-在放置新的图像后，在放置位置之前已经放置的图像已经被放置，我想摆脱这个问题。

我可以更改些什么来实现该功能？

Answer 1

在容器内部时，您需要将.image元素设置为position: absolute 。 然后，您需要根据放置事件的位置和容器的偏移量来计算其left和top 。

CSS：

#container2 .image{
    position: absolute;
}

JS：

var containerOffset = $container.offset();
$canvasElement.css({
    left: ui.position.left - containerOffset.left,
    top: ui.position.top - containerOffset.top
});

http://jsfiddle.net/E9y8Q/7/