Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery get div coordinates & size

    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.

    Code:
    <script>
    
    $('#resizeDiv, #resizeDiv2, ,#resizeDiv3')
      .draggable()
      .resizable({
     
     minHeight: 150,
     minWidth: 200
     });
    
    </script>
    
    <script>
     
    $("*", document.body).click(function (e) {
      var offset = $(this).offset();
      e.stopPropagation();
      $("#result").text(this.id + " coords ( " + offset.left + ", " +
                                      offset.top + " )");
    });
    </script>
    I tried to work with this for the size, but no luck.
    Code:
      function showWidth(ele, w) {
          $("div").text("The width for the " + ele + 
                        " is " + w + "px.");
        }
    
        $('#test').click(function () { 
          showWidth("paragraph", $(this).width()); 
        });

    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!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    My suspicion would be that the draggable() method takes over all mouse events during the drag. If you try to add additional mouse events it may prevent draggable() from working properly.

    I'm assuming you are using draggable() from a library, rather than creating your own version? Andy.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •