Home/ Questions/Q 821783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T02:41:52+00:00

If you build a simple dragger: $(document).ready(function(){ $(‘#tomove’).draggable({ axis: ‘x’, drag: function(event, ui) {

  • 0

If you build a simple dragger:

$(document).ready(function(){
  $('#tomove').draggable({
    axis: 'x',
    drag: function(event, ui) {
      mouseUp();
    }
  });
});

And you try to stop it programmatically:

function mouseUp() {
  if($('#tomove').offset().left > 400) {
    $('#tomove').trigger('mouseup');
  }
}

You will get this message in error console:

this.helper is null

Is there any way to fix this?
Thanks for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like you’re just trying to constrain movement on the draggable element, is this correct? Have you seen this page: http://jqueryui.com/demos/draggable/#constrain-movement

    EDIT

    How about this instead then: (sample page, does what you’re asking – be mindful of the jquery inclusion location)

    Also notice I changed the name of the method to be something a little more apropos. This will not stop the user from being able to drag back to the left. I didn’t think you wanted to actually stop them if they hit 400 (or whatever other wall).

    If you want to do that, you merely $('#element').draggable('destroy') 

    <html>
    <head>
        <title>Draggable jQuery-UI Width Block</title>
        <script src="jquery-1.4.2.min.js" ></script>
        <script src="jquery-ui-1.8.1.custom.min.js" ></script>
    </head>
    <body>
        <div id="tomove" style="width:100px;height:20px;background:silver;">
            <span>some text</span>
        </div>
        <script>
        $(document).ready( function() {
            $('#tomove').draggable({
                axis:   'x',
                drag: function(event, ui) {
                    dragBlock( ui );
                }
            });
        });
        function dragBlock( ui ) {
            if( ui.position.left > 400 ) {
                ui.position.left = '400px';
            }
            if( ui.position.left < 0 ) {
                ui.position.left = '0px';
            }
        }
        </script>
    </body>
</html>
    • 0