可拖動的可放置-放置時保持在原位

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/