Как получить позицию перетаскиваемой кнопки

Как получить координатную позицию после использования перетаскивания 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>

источник

2015-08-10 Jit Dhar

Это было отвечено еще в одном сообщении. См. Http://stackoverflow.com/questions/4903530/how-to-get-the-position-of-a-draggable-object – Hopfeeyy

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

Вы только что запустили приведенный ниже код и увидите результаты. Вы можете искать смещение Ui в исходном сайте jquery UI

источник

2015-08-10 11:06:52

благодаря его работе. –

Использование событий. Вы можете просмотреть все события в 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 
});

Это все

источник

2015-08-10 11:02:17

Как получить позицию перетаскиваемой кнопки

ответ

Смежные вопросы