存储 Jquery 可拖动位置

发布于 2025-01-06 07:21:49 字数 149 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自此以后，行同陌路 2025-01-13 07:21:49

这仅包括您可能能够使用的 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);
        });
    }
});

This just includes that AJAX call you might be able to use.

$(".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);
        });
    }
});

回复收藏 0 原文

长梦不多时 2025-01-13 07:21:49

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

$(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 您可以获取拖动停止后对象的顶部和左侧位置

Does this help. You can get the required data from the callback function arguments

$(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;  
    }
});
});

From ui.position you can get top and left position of the object after the dragging has stopped

回复收藏 0 原文

羁拥 2025-01-13 07:21:49

如果您查看事件下的 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;
   }
});

if you look in the jQuery ui draggable method documentation under events, you'll see the stop method. In this method you can look at the draggable elements axis option and then do your ajax call to update the database.

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

回复收藏 0 原文

~没有更多了~