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

Here's the 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/

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

1 个答案: