SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help using draggable positions!

    I have a webpage which the user can drag a marker around inside a div and the script then shows the standard js alert box with the final positions of the marker once the user has stopped dragging it about. What I need to do is get the script to add these values to two hidden input elements in the page. Can anyone tell me how I can do this please?

    The script I'm using is below, any help with this would be greatly appreciated.

    Code JavaScript:
    $( init );
     
    function init() {
      $('#makeMeDraggable').draggable( {
        cursor: 'move',
        containment: 'content',
        stop: handleDragStop
      } );
    }
     
    function handleDragStop( event, ui ) {
      var offsetXPos = parseInt( ui.position.left );
      var offsetYPos = parseInt( ui.position.top );
      alert( "Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
    }

    Thanks in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    I have a webpage which the user can drag a marker around inside a div and the script then shows the standard js alert box with the final positions of the marker once the user has stopped dragging it about. What I need to do is get the script to add these values to two hidden input elements in the page. Can anyone tell me how I can do this please?
    You could just use something like this, assuming that your form has an identifier on the form tag itself:

    Code javascript:
    $('#myForm [name="xpos"]').val(offsetXPos);

    Please don't be tempted to place identifier elements on all of your form controls. That's just a waste. Just the form tag itself is enough to be identified. From the form element you can easily get to all of the form controls within it from there, without needing to add any more fluff to your form.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help with this Paul. I'm not sure where I need to put the code you suggested as I've tried it and its not working for me. I think I'm missing something. The code I now have is below. Would you mind having a look and pointing out where I'm going wrong with this please?

    Code JavaScript:
    <script type="text/javascript">
     
    $( init );
     
    function init() {
      $('#makeMeDraggable').draggable( {
        cursor: 'move',
        containment: 'content',
        stop: handleDragStop
      } );
    }
     
    function handleDragStop( event, ui ) {
      var offsetXPos = parseInt( ui.position.left );
      var offsetYPos = parseInt( ui.position.top );
      //alert( "Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
      $('#myForm [name="xpos"]').val(offsetXPos);
    }
     
    </script>



    <form name="myForm" method="post" action="process.php">
    <input name="xpos" type="hidden" value="">
    </form>

    <div id="content">
    <div id="makeMeDraggable"> </div>
    </div>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    Would you mind having a look and pointing out where I'm going wrong with this please?
    There doesn't seem to be anything at first glance that would interfere with things, so a closer look at a test page the demonstrates the problem will allow me to investigate the issue on a much deeper level.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul would you be able to have a look at this if I send you a link to the page where I'm having problems please?
    this part is now holding up the whole project and I just can't figure it out.

    any help much appreciated. Thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    any help much appreciated. Thanks
    The form should have an identifier, such as:

    HTML Code:
    <form id="addjob" ...>
    That way you can easily access your hidden form field with:

    Code javascript:
    $('#addjob [name="xpos"]').val(offsetXPos);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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