可拖动的droppable - 掉落时保持原位

This is the code I have so far for my draggable-droppable-resizable functionality:

这是我到目前为止的可拖动可丢弃的可调整功能的代码:

 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);
            }
        }
    });

Here's the jsFiddle.

这是jsFiddle。

What I would like to achieve is for the dropped images to remain in the place where they were dropped.

我想要实现的是丢弃的图像保留在它们被丢弃的地方。

There are also some other issues - the images that have already been dropped before change their positions after a new one gets dropped and I would like to get rid of this issue.

还有一些其他问题 - 在新的一个被删除之后改变其位置之前已经被丢弃的图像,我想摆脱这个问题。

What can I change to implement that functionality?

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

1 个解决方案

#1

You will need to set the .image elements to position: absolute when inside of the container. You then need to calculate their left and top based on the position of the drop event and the offset of the container.

在容器内部,您需要将.image元素设置为position:absolute。然后,您需要根据放置事件的位置和容器的偏移量来计算它们的左侧和顶部。

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/

#1