JQuery可拖动获取放置位置，而不是还原位置答案

【问题标题】：JQuery draggable get dropped location, not reverted positionJQuery可拖动获取放置位置，而不是还原位置
【发布时间】：2023-03-27 12:50:01
【问题描述】：

我试图在 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);
}

问题是，该元素获取的是它被设置回的元素的坐标（被拖动的元素恢复到它的起始位置，以便您可以添加另一个元素，以及另一个......）

所以我想要的是获取放置位置的坐标，而不是还原位置的坐标...

对不起，如果这不是完全清楚。如果您需要更多信息，请告诉我。

【问题讨论】：

标签： jquery jquery-ui coordinates draggable

【解决方案1】：

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

    var pos = ui.offset;

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

【讨论】：