ol map draggable ol3

by Thomas B.

HTML

<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Drag Container to move Map-Container<div id="drag_container">
    <div id="map"></div>
</div>

CSS

html,
body
{
    width:100%; 
    height:100%;
}


#drag_container
{
    width:70%; 
    cursor: move;
    height:70%;
    background:rgba(255,0,0,0.6);
    border: 1px solid #b20000;
}

#map
{
    cursor:pointer;cursor:hand;
    width:80%; 
    height:80%;
    margin-top:10%;
    margin-left:10%;
    border: 2px solid #32af0c;
}

JavaScript

var map = new ol.Map({
            loadTilesWhileInteracting: true,
            target: 'map',
            view: new ol.View({
                center: ol.proj.transform([13.3, 53.3], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            }),
            layers: [
                new ol.layer.Tile({source: new ol.source.OSM()})
            ]
    });

$('#drag_container').draggable({
    cancel: '#map'
});