Question

使用jQuery拖放后如何获取坐标位置？我想将位置保存到数据库中，以便下次访问时，该项目将处于相同的位置。

    <!doctype html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>jQuery UI Draggable - Default functionality</title>
            <link rel="stylesheet" href="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\themes\base\jquery.ui.all.css">
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\jquery.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.core.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.widget.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.mouse.js"></script>
            <script src="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\ui\jquery.ui.draggable.js"></script>
            <link rel="stylesheet" href="C:\Users\Atanu\Downloads\jquery-ui-1.9.1\demos\demos.css">
            <style>
            #draggable { width: 150px; height: 150px; padding: 0.5em; }
            </style>
            <script>

        $(function() {
                $( "#draggable" ).draggable({
                cancel: false
            });
            }); 

        $("#draggable").click(function(){
            var x = $("#draggable").position();
            alert("Top: " + x.top + " Left: " + x.left);
        });


           </script>
        </head>
        <body>

        <button type="button" id="draggable" class="ui-widget-content">
            Drag me around
        </button>

        <div class="demo-description">
        <p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
        </div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
        </body>
        </html>

Answer 1

＆＃13;

$(document).ready(function(){
    $( "#draggable" ).draggable({
                            
                            drag: function(){
                                var offset = $(this).offset();
                                var xPos = offset.left;
                                var yPos = offset.top;
                                $('#posX').val(xPos);
                                $('#posY').val(yPos);
                                
                            }
                           
    });
  });

＆＃13;

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable">
  <p>Drag me around</p>
</div>
xpos=<input type="text" id="posX">
Ypos=<input type="text" id="posY">

＆＃13;

您刚刚运行以下代码并查看结果。您可以在jquery UI原始网站中搜索偏移量Ui

Answer 2

使用活动。您可以在jQuery API中查看所有事件：

http://api.jqueryui.com/draggable

如果您收听dragstop事件，则可以存储值：

$( ".selector" ).on( "dragstop", function( event, ui ) {
     // top position: ui.position.top
     // left position: ui.position.left
     // top offset: ui.offset.top
     // left offset: ui.offset.top
});

全部

如何获取拖动按钮的位置

2 个答案: