You can use the mousedown, mousemove and mouseup events to detect dragging. Here's a simple dragging example:
<style>
#map { background-color: red; cursor: move; position: absolute; width: 100px; height: 100px; }
</style>
<div id="map">Map</div>
<script>
var isDraggingMap = false;
function mapDragStartHandler(event) {
isDraggingMap = true;
return mapDragMoveHandler(event);
}
function mapDragMoveHandler(event) {
if (isDraggingMap) {
var map = document.getElementById('map');
map.style.left = (event.pageX-50)+'px';
map.style.top = (event.pageY-50)+'px';
return false;
}
}
function mapDragEndHandler(event) {
if (isDraggingMap) {
isDraggingMap = false;
return false;
}
}
document.getElementById('map').addEventListener('mousedown', mapDragStartHandler);
document.addEventListener('mousemove', mapDragMoveHandler);
document.addEventListener('mouseup', mapDragEndHandler);
</script>
