Need help to create function of drag div or text in jquery.

Need help to create function of drag div or text in jquery.

Hi all,

I am using jquery for draging a div. still it working on div id base but i want use as function like mydrag('div1'){ // } please help me..

  2. <html><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <title>Test File</title>

  6. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  7. <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

  9. <style type="text/css">
  10. #canvas { width: 500px; height: 400px; background: #ccc; position: relative; margin: 2em auto; }
  11. #box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: green; cursor: move; }
  12. </style>

  14. <script type="text/javascript">//<![CDATA[ 
  15. $(function(){
  16. var coordinates = function(element) {
  17. element = $(element);
  18. var top = element.position().top;
  19. var left = element.position().left;
  20. $(element).text('X: ' + left + ' ' + 'Y: ' + top);
  21. }

  23. function mydrag(id){
  24. $(id).draggable({
  25. start: function() {
  26. coordinates(id);
  27. },
  28. containment : "#canvas",

  30. stop: function() {
  31. coordinates(id);
  32. }
  33. });
  34. }

  36. });//]]>  

  38. </script>


  41. </head>

  43. <body style="cursor: auto;">
  44. <div id="canvas">
  45. <div id="box"  style="left: 189px; top: 134px;" onclick="mydrag('box');" ></div>
  46. </div>
  47. </body>
  48. </html>