Disable scrolling with draggable div

Question

I have a div which is draggable. When I drag it close to one of the edges on the webpage the whole website scroll. Can I disable this function? (I can basically use the div to move around the webpage, but I want it to be limited to where I'm currently at) I use the jquery draggable script!

The header:

link href="stilmallaudioplayer.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> </style> <script> $(function() { $( "#audioplayer" ).draggable(); }); </script>

The body:

<div id="audioplayer" class="ui-widget-content"> <audio controls class="ui-widget-content"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div>

Note: this is not my full code, just the draggable div part!

The css:

#audioplayer { padding: 0.5em; z-index: 3; position: absolute; top: 100px; left: 100px; }

K K · Accepted Answer · 2015-03-10 09:20:30Z

You can set overflow:hidden on the body or the container element on drag start and remove it on drag stop :

Js:

$("#audioplayer").draggable({ start: function (event, ui) { $('body').addClass("overflow"); }, stop: function (event, ui) { $('body').removeClass("overflow"); } });

CSS:

overflow{overflow:hidden;} //Use inline style or !important if other css overrides this

Michelangelo · Accepted Answer · 2015-03-10 09:33:39Z

This seems to work: fiddle

jQuery

$(function () { $("#audioplayer").draggable( { containment: "html", scroll: false } ); });

CSS

html, body { height:100%; overflow:hidden; } #audioplayer { padding: 0.5em; z-index: 3; position: absolute; top: 100px; left: 100px; border: 1px solid black; height:20px; width: 100px; }

Collectives™ on Stack Overflow

Disable scrolling with draggable div

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related