如何正确设置Jquery拖放的相对位置

Question

我的拖放功能有问题

这是我的画布

<canvas id="note" class="lego"
width="10" height="20">
</canvas>

我的拖放创建一个克隆并将其放在我的div中（div ID为“section”），删除后我删除他的类“lego”并添加一个名为“legopiazzato”的新文件

如果我将克隆的样式保留为“position：absolute”，则没有问题。

但我需要亲戚，因为我想要div上的顶部/左侧坐标而不是文档上的顶部/左侧坐标。

问题是：对于相对的，在放置操作之后，他将鼠标置于绝对位置，并使用此设置克隆的顶部/左侧（我的克隆放置在与其位置不同的位置）我离开了放下操作）

我想减去这个绝对的坐标，但我不知道该怎么做

我该如何解决？

这是我的DraganDrop：

$(document).ready(function () {

var x = null;



$(".lego").draggable({
    helper: 'clone',
    cursor: 'move',
    revert: "invalid",
    tolerance: "pointer",

    stop: function (e, ui) {

            $(".ui-draggable-dragging").addClass("legopiazzato");


            $(".ui-draggable-dragging").removeClass("lego");

            $(".ui-draggable-dragging").dblclick(function() {
            $(this).remove();
            });

            $(".legopiazzato").draggable({
                cursor: 'move',
                grid: [ 1,1]
            });

    }
});

        $("#section").droppable({

            drop: function (e, ui) {

                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                ui.helper.remove();

                console.log(ui.position.left);
                console.log(ui.position.top);

                x.draggable({
                    helper: 'original',
                    containment: '#section',
                    tolerance: 'fit'
                });
                x.appendTo('#section');

                }

            }

        });
});