Question

如何删除JQueryUI可拖动对象的X，Y co-ords，并使用AJAX将它们发送到某个东西（java servlet）？

我试图将它的位置存储在数据库中，我已经完成了这样做的处理程序，我是一个好的后端人，但我用JavaScript吮吸！

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

Answer 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开始，你可以在拖动停止后获得对象的顶部和左侧位置

Answer 3

如果你查看事件下的jQuery ui draggable方法文档，你会看到stop方法。在此方法中，您可以查看draggable elements axis选项，然后执行ajax调用以更新数据库。

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

存储Jquery可拖动位置

3 个答案: