如何获取拖动按钮的位置答案

【问题标题】：How to get the position of dragged button如何获取拖动按钮的位置
【发布时间】：2015-08-10 10:57:03
【问题描述】：

使用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>

【问题讨论】：

这已经在另一个帖子中得到了回答。见stackoverflow.com/questions/4903530/…

标签： jquery

【解决方案1】：

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

<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">

你刚刚运行了下面的代码，看看结果。你可以在jquery UI original site中搜索offset Ui

【讨论】：

【解决方案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
});

就是这样

【讨论】：