JQuery draggable得到丢弃的位置，而不是恢复位置

Question

我试图在JQuery中获取可拖动对象的相对位置。让我们先用一些图片来澄清它。这是脚本的起点：

让我们说我放弃了第一个元素：

然后，删除元素的顶部和左侧（原始版本的副本）应为top: 100px; left: 120px;

但他们是20px ......

以下是我使用的HTML：

<div id="toolbar">
    <div class="toolbar_content">
        <div id="holder_new_row_lr"></div>
        <div id="holder_new_row_ud"></div>
        <div id="holder_new_row_rl"></div>
        <div id="holder_new_row_du"></div>
    </div>
</div>
<div id="canvas"></div>

和JS：

var x = 0;
var y = 0;
var wrapper = $("#canvas").offset();

$("#holder_new_row_lr").draggable({
    cursor: "crosshair",
    grid: [20, 20],
    revert: true,
    scope: "items",
    stop: function (event, ui) {
        // log("X: " + ui.position.left + " y: " + ui.position.top);
        var obj = $(this).clone();
        $(obj).css("position", 'absolute');

        log('Left:' + $(this).position().left + ' Top:' + $(this).position().left);
        $(obj).css("left", $(this).position().left);
        $(obj).css("top", $(this).position().left);

        // var Stoppos = $(this).position();
        // var left = Math.abs(Stoppos.left);
        // var top = Math.abs(Stoppos.top);
        // $(obj).css("left", ui.position.left);
        // $(obj).css("top", ui.position.top);

        // var currentPos = ui.helper.position();
        // var posLeft = parseInt(currentPos.left);
        // var posTop = parseInt(currentPos.top);
        // $(obj).css("left", posLeft);
        // $(obj).css("top", posTop);

        // $(obj).css("top", ui.position.top);
        // $(obj).css("left", ui.position.left);

        $("#canvas").append(obj);
    }
});

$("#canvas").droppable({
    scope: "items",
    drop: function (event, ui) {
        log("Dropped!");
        log(event);
    }
});

完整性的CSS ......

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#toolbar {
    width: 100%;
    background-color: red;
    height: 100px;
}
#toolbar > .toolbar_content {
    padding:20px;
}
#toolbar > .toolbar_content > div {
    float:left;
    padding: 10px;
}
#holder_new_row_lr {
    background: url('row_lr.png') no-repeat;
    width:80px;
    height: 58px;
}
#holder_new_row_ud {
    background: url('row_ud.png') no-repeat;
    width:58px;
    height: 40px;
}
#holder_new_row_rl {
    background: url('row_rl.png') no-repeat;
    width:80px;
    height: 58px;
}
#holder_new_row_du {
    background: url('row_du.png') no-repeat;
    width:58px;
    height: 40px;
    background-position:left bottom;
}
#canvas {
    width: 100%;
    background-color: grey;
    /* Firefox */
    height: -moz-calc(100% - 100px);
    /* WebKit */
    height: -webkit-calc(100% - 100px);
    /* Opera */
    height: -o-calc(100% - 100px);
    /* Standard */
    height: calc(100% - 100px);
}

问题是，元素得到了它所设置的元素的坐标（被拖动的元素恢复到它的起始位置，以便你可以添加另一个元素，和另一个......）

所以我想要的是得到掉落地点的坐标，而不是回归地点......

对不起，如果这还不完全清楚。如果您需要更多信息，请与我们联系。

Answer 1

要获取位置，stop事件的ui参数具有位置和偏移属性。在这种情况下，偏移将产生正确的结果：

    var pos = ui.offset;

    log('Left:' + pos.left + ' Top:' + pos.top);
    $(obj).css("left", pos.left);
    $(obj).css("top", pos.top);