12

I have a draggable defined this way:

$("#drag_area a").live("mouseup", function() { var object = $(this); var class_array = $(this).attr("class").split(" "); element(object,class_array); return false; }).draggable({ containment: "#drag_area", grid: [44, 44], zIndex: 1000 }).each(function(i, item){ });

When i drag an item of the type 'drag_area a', if i scroll the page while dragging it, the item exits from containment... It is not a desidered situation, so how can i avoid this? Can i disable page scrolling during dragging?

Improve this question
4
  • 1
    create a container for your draggable elements and make it overflow: auto so when you drag-drop, scroll will be remain in the container itself. Commented Sep 4, 2015 at 10:37
  • 1
    It's working perfectly, you saved the day. Thank you. If you convert the comment into a proper answer i'll accept it. Commented Sep 4, 2015 at 10:55
  • 1
    improvement ... change .live to .on if you use newer jquery 1.6+ because .live is deprecated Commented Sep 4, 2015 at 10:59
  • I'm stucked with an older version of jquery, so it stays as it is for now. Thank you for the suggestion :) Commented Sep 4, 2015 at 11:23

3 Answers 3

Reset to default
36

I solved that problem with one line of css on dragging element touch-action: none;

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

this is perfect.
Unbelievable!!!
Please provide more context around your answer. What element did you apply that to, and explain why it solves the problem? Links to more information.
3

You'll be using all your draggable elements without any container, i.e. why when you Drag-n-Drop your elements the whole page scrolls due to dragging.

Instead of that do as:

<div class="dragWrapper"> <!-- Place all your draggable elements here --> </div>

set a max-height and overflow of the dragWrapper class as:

.dragWrapper { max-height: 400px; overflow: auto; }

Now when you Drag-n-Drop your elements, instead of your body, scroll will be inside the container only.

Hope that will do the trick for you(which already did ;).

Improve this answer

1 Comment

Please tell me you didn't use "i.e." for "that is". Edit that immediately in this holy grail of all that is SO good
3

Take a look at this jsfiddle.
I've made it based on this SO question: How to disable scrolling temporarily?

Here is an excerpt:

function disableScroll() { if (window.addEventListener) // older FF window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; // modern standard window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE window.ontouchmove = preventDefault; // mobile document.onkeydown = preventDefaultForScrollKeys; } $("#draggable").draggable({ start: function () { disableScroll(); } });
Improve this answer

1 Comment

Thank you very much. In the end, it seemed an overflow:auto; was enough.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.