How do I get the coordinate position after using jQuery drag and drop

Question

How do I get the coordinate position after using jQuery drag and drop   I want to save the coordinate to a database  so that next time I visit  the item will be in that position  For example  x  520px  y  300px   EDIT   I am PHP and mysql programmer     Is there any tutorial out there

User · Answer

Cudos accepted answer is great  However  the Draggable module also has a  drag  event that tells you the position while your dragging   So  in addition to the  start  and  stop  you could add the following event within your Draggable object          Drag current position of dragged image      drag  function event  ui                Show the current dragged position of image         var currentPos     this  position               div xpos   text  CURRENT   nLeft      currentPos left     nTop      currentPos top

User · Answer

Had the same problem  My solution is next       element   droppable       drop  function  event  ui                 position of the draggable minus position of the droppable            relative to the document         var  newPosX   ui offset left -   this  offset   left          var  newPosY   ui offset top -   this  offset   top

User · Answer

I was need to save the start position and the end position  this work to me           object   draggable           stop  function ev  ui               var position   ui position              var originalPosition   ui originalPosition

User · Answer

I just made something like that  If I understand you correctly    I use he function position   include in jQuery 1 3 2   Just did a copy paste and a quick tweak    But should give you the idea      Make images draggable      item   draggable           Find original position of dragged image      start  function event  ui                Show start dragged position of image          var Startpos     this  position               div start   text  START   nLeft     Startpos left     nTop      Startpos top                  Find position where image is dropped      stop  function event  ui                Show dropped position          var Stoppos     this  position               div stop   text  STOP   nLeft     Stoppos left     nTop      Stoppos top               lt div id  container  gt       lt img id  productid 1  src  images pic1 jpg  class  item  alt    title      gt       lt img id  productid 2  src  images pic2 jpg  class  item  alt    title      gt       lt img id  productid 3  src  images pic3 jpg  class  item  alt    title      gt   lt  div gt    lt div id  start  gt Waiting for dragging the image get started    lt  div gt   lt div id  stop  gt Waiting image getting dropped    lt  div gt

User · Answer

This worked for me       element1   droppable        drop  function event  ui                var currentPos   ui helper position                alert  left   parseInt currentPos left    top   parseInt currentPos top

User · Answer

None of the above worked for me   Here s my solution- works great    dropTarget droppable       drop  function  event  ui             Get mouse position relative to drop target       var dropPositionX   event pageX -   this  offset   left      var dropPositionY   event pageY -   this  offset   top         Get mouse offset relative to dragged item      var dragItemOffsetX   event offsetX      var dragItemOffsetY   event offsetY         Get position of dragged item relative to drop target      var dragItemPositionX   dropPositionX-dragItemOffsetX      var dragItemPositionY   dropPositionY-dragItemOffsetY       alert  DROPPED IT AT     dragItemPositionX          dragItemPositionY      Based partly off solution given here  https   stackoverflow com a 10429969 165673

User · Answer

If you are listening to the dragstop or other events  the original position should be a ui parameter   dragstop  function event  ui        var originalPosition   ui originalPosition      Otherwise  I believe the only way to get it is   draggable data  draggable   originalPosition   Where draggable is the object you are dragging   The second version is not guaranteed to work in future versions of jQuery

User · Answer

x000D   x000D    function    x000D      x000D           element    draggable   snap    ui-widget-header  grid    1  1      x000D        x000D        document  ready function     x000D              element   draggable    x000D                  containment    snaptarget    x000D                  scroll  false x000D              mousemove function    x000D                  var coord     this  position    x000D                  var width     this  width    x000D                 var height     this  height    x000D                     p position   text        coord left         coord top          x000D                     p size   text        width         height          x000D              mouseup function    x000D                  var coord     this  position    x000D                  var width     this  width    x000D                  var height     this  height    x000D                    post   test layout view php    x  coord left  y  coord top  w  width  h  height    x000D                  x000D                      x000D              x000D   element  background  666 border 1px  000 solid cursor move height 110px width 110px padding 10px 10px 10px 10px   x000D   snaptarget   height 610px  width 1000px   x000D   draggable   width  90px  height  80px  float  left  margin  0 0 0 0  font-size   9em    x000D   wrapper x000D     x000D  background-image linear-gradient 0deg  transparent 24   rgba 255  255  255   05  25   rgba 255  255  255   05  26   transparent 27   transparent 74   rgba 255  255  255   05  75   rgba 255  255  255   05  76   transparent 77   transparent   linear-gradient 90deg  transparent 24   rgba 255  255  255   05  25   rgba 255  255  255   05  26   transparent 27   transparent 74   rgba 255  255  255   05  75   rgba 255  255  255   05  76   transparent 77   transparent   x000D  height 100   x000D  background-size 45px 45px  x000D  border  1px solid black  x000D  background-color   434343  x000D  margin  20px 0px 0px 20px  x000D    x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D     lt head gt  x000D       lt meta charset  utf-8  gt  x000D       lt title gt Layout lt  title gt  x000D       lt link rel  stylesheet  href    code jquery com ui 1 11 4 themes smoothness jquery-ui css  gt  x000D       lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D       lt script src    code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt  x000D       lt link rel  stylesheet  href     themes default css test4 css  type  text css  charset  utf-8   gt  x000D       lt script src     themes default js layout js  gt  lt  script gt  x000D     lt  head gt  x000D   lt body gt  x000D       lt div id  snaptarget  class  wrapper  gt  x000D           lt div id  element  class  draggable ui-widget-content  gt  x000D             lt p class  position  gt  lt  p gt  x000D             lt p class  size  gt  lt  p gt  x000D           lt  div gt  x000D       lt  div gt   x000D       lt div gt  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I would start with something like this  Then update that to use the position plugin and that should get you where you want to be

[jquery] How do I get the coordinate position after using jQuery drag and drop?

Examples related to jquery

Examples related to drag-and-drop

Examples related to save

Examples related to position