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;
}

Answer 1

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