display div width&height + div x&y coordinates

display div width&height + div x&y coordinates

hi, im new to JQuery, i found 2 tutorials which i followed ut now im a bit stuck.

I have x amount of draggable & resizable divs, they work as i want them to, im outputing the coordinates of each div in a textfield. My problem is that the textfield only displays coordinates when a div is CLICKED, so when holding the mouseBtn and draging a div  around then releasing the mouseBtn  the coordinates aren't displayed in the textfield. 
I tried to set 'mouseup' instead of 'click' but then the divs are being dragged around all the time even tho you released the mouseBtn.

The second thing is that i want to output the size of the div in another textfield, so when a div is resized the new size of that div should be displayed in the textfield.

  2. <script>

  4. $('#resizeDiv, #resizeDiv2, ,#resizeDiv3')
  5.   .draggable()
  6.   .resizable({
  8. minHeight: 150,
  9. minWidth: 200
  10. });

  12. </script>

  14. <script>
  16. $("*", document.body).click(function (e) {
  17.   var offset = $(this).offset();
  18.   e.stopPropagation();
  19.   $("#result").text(this.id + " coords ( " + offset.left + ", " +
  20.                                   offset.top + " )");
  21. });
  22. </script>
for the size i tried to work with

  2.   function showWidth(ele, w) {
  3.       $("div").text("The width for the " + ele + 
  4.                     " is " + w + "px.");
  5.     }

  7.   $('#test').click(function () { 
  8.       showWidth("paragraph", $(this).width()); 
  9.     });
i want to send both size and x&y of each div to a database, so any suggestions that will improve/help my process are very much welcome!

Greets