Question

在拖放div时我想获得拖动div的坐标（坐标应该是左，右和上）我还想使用ajax发布这些坐标。示例链接 jsfiddle.net/qPw92

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui.js"></script>
        <style>
        .draggable { 
            width: 150px; 
            min-height: 150px; 
            padding: 0.5em; 
            border:1px solid black; 
            overflow-wrap: break-word; 
         }
         </style>
         <script>   
         $(function() {             
             $('.draggable').draggable({
                 var data={ 
                     // Get some dives coordinates 
                 };
                 $.ajax({
                     url: "/index.php/pages/getinfo/",
                     data: data,
                     type: 'POST',
                     success: function(result){
                         //alert(result);
                         $("#ajaxResponce").html(result);
                     }
                 });
             });
        });
        </script>
    </head>
    <body>
        <div class="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
        <div class="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
        <div class="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
    </body>
</html>

Answer 1

您所要做的就是为Draggable事件添加回调：

$('.move').draggable({
    stop: function(e, ui) {
        var offset = $(this).offset(),
            x = offset.left,
            y = offset.top;
        $(this).text("Position: (" + x + ", " + y + ")");
    }
});

此处，当可拖动对象停止拖动时，它会获取x和y位置并将文本设置为该位置。你可以在这里看到一个演示：http://jsfiddle.net/BenedictLewis/vKwFj/。

为了将其作为AJAX调用发送，只需编写一个可以指定x和y位置的函数：

function sendToDB(x, y){
    var data = JSON.stringify({"x": x, "y": y});
    $.ajax({
        url: "ajax URL",
        data: data,
        type: "POST",
        success:function(result){
            // Do something here
        });
    });
});

然后我们在停止回调中调用该函数。另一个演示在这里：http://jsfiddle.net/BenedictLewis/3Lx7z/。

Answer 2

试试这个

所以你必须使用这个选项。 position()或offset()。

position()基本上类似于您在CSS top，left properties中使用的内容。

offset()将返回相对于文档的距离。这会考虑边距，填充和边框。

$('#id').offset()

参见

http://api.jquery.com/position/

使用jQuery ui库获取元素拖动体的坐标

2 个答案: