jQuery draggable shows helper in wrong place after page scrolled

by

This might be a related bug report, it’s been around for quite a while: http://bugs.jqueryui.com/ticket/3740

It seems to happen on every browser I tested (Chrome, FF4, IE9). There are a few ways you can work around this issue:

1. Use position:absolute; in your css. Absolutely positioned elements don’t seem to be affected.

2. Make sure the parent element (event if it’s the body) has overflow:auto; set. My test showed that this solution fixes the position, but it disables the autoscroll functionality. You can still scroll using the mousewheel or the arrow keys.

3. Apply the fix suggested in the above bug report manually and test thouroughly if it causes other problems.

4. Wait for an official fix. It’s scheduled to jQuery UI 1.9, although it has been postponed a few times in the past.

5. If you’re confident that it happens on every browser, you can put these hacks into the affected draggables’ events to correct the calculations. It’s a lot of different browsers to test though, so it should only be used as a last resort:

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});

More Related Contents:

  1. Restrict jQuery draggable items from overlapping/colliding with sibling elements
  2. Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)
  3. jQuery Drag And Drop Using Live Events
  4. jQuery drag and drop simulation does not work for the last draggable
  5. grouping draggable objects with jquery-ui draggable
  6. How can I make a jQuery UI ‘draggable()’ div draggable for touchscreen?
  7. How to exclude an element from being dragged in sortable list?
  8. jQuery Date Picker – disable past dates
  9. Find out whether radio button is checked with JQuery?
  10. Detecting no results on jQuery UI autocomplete
  11. jQuery UI Autocomplete widget search configuration
  12. JQuery ui – date picker, disabling specific dates
  13. Unobtrusive validation in Chrome won’t validate with dd/mm/yyyy
  14. Form Submit jQuery does not work
  15. How to get the selected date value while using Bootstrap Datepicker?
  16. How to implement “mustMatch” and “selectFirst” in jQuery UI Autocomplete?
  17. How to display an IFRAME inside a jQuery UI dialog
  18. jQuery UI Dialog Button Icons
  19. How to attach callback to jquery effect on dialog show?
  20. Combined total for multiple jQuery-UI Sliders
  21. jQuery Sortable – drag and drop multiple items
  22. How can I disable a button on a jQuery UI dialog?
  23. jquery draggable: how to limit the draggable area?
  24. Jquery Date picker Default Date
  25. How do you trigger autocomplete “select” event manually in jQueryUI?
  26. jQuery – draggable images on iPad / iPhone – how to integrate event.preventDefault();?
  27. How to add jQueryUI library in MVC 5 project?
  28. Selecting a jQuery Tab using a parameter in the URL
  29. JQuery Datepicker – no default date
  30. How to programmatically select selectables with jQuery UI?

Leave a Comment