存储 Jquery 可拖动位置答案

【问题标题】：Store Jquery Draggable Position存储 Jquery 可拖动位置
【发布时间】：2012-02-17 19:25:42
【问题描述】：

如何获取 JQueryUI 可拖动对象的 X、Y 坐标，当它被放下时，并使用 AJAX 将它们发布到某个东西（java servlet）？

我正在尝试将它的位置存储在数据库中，我已经让处理程序完成了这项工作，我是一个不错的后端人员，但我对 JavaScript 很烂！

【问题讨论】：

当你拖动一个元素时，它的左上角位置会更新。这是你需要的吗？

标签： javascript jquery ajax draggable jquery-ui-draggable

【解决方案1】：

这仅包括您可以使用的 AJAX 调用。

$(".draggable").draggable({
    stop: function(event, ui) {
        var x = ui.position.left;
        var y = ui.position.top;

        $.post("servlet", {
            x: x,
            y: y
        }.success(function() {
            console.log(event+" "+ui+" "+ui.position);
        }.error(function() {
            console.log("FAILED: "+event+" "+ui+" "+ui.position);
        });
    }
});

【讨论】：

【解决方案2】：

这有帮助吗？您可以从回调函数参数中获取所需的数据

$(document).ready(function(){

$( "#drag_area" ).draggable({
    stop: function(event, ui){
        console.log(event);
        console.log(ui);
        console.log(ui.position);   
        var left = ui.position.left;
        var top = ui.position.top;  
    }
});
});

在 ui.position 中，您可以在拖动停止后获取对象的顶部和左侧位置

【讨论】：

【解决方案3】：

如果您查看事件下的 jQuery ui draggable 方法文档，您将看到 stop 方法。在这种方法中，您可以查看可拖动元素轴选项，然后执行 ajax 调用以更新数据库。

$( ".selector" ).draggable({
   stop: function(event, ui) {
      //edit for my mistake
       //var axis = $( ".selector" ).draggable( "option", "axis" );
       var axis = ui.position;
   }
});

【讨论】：

axis 选项如果设置为 true，则将拖动约束到 x 或 y 轴。上面的代码返回 false。
是我的愚蠢。获取当前位置是 ui.position。