JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" draggable="true">
    <div id="map"></div>
</div>

CSS

#main
{
    width: 250px;
    height: 250px;
    overflow: auto;
}

#map
{
    width: 640px;
    height: 480px;
    background-image: url(http://orig00.deviantart.net/ed21/f/2010/236/6/5/rpg_maker_xp_test_map_01_by_peachmario99.png);
    transition: all 0.1s;
}

[draggable=true] {
  user-select: none;
    cursor: 'move';
}

JavaScript

var div = document.getElementById('main');
var startX, startY, scrollX, scrollY, divScrollX, divScrollY;
function startDrag(evt) {
    console.log('dragStart', evt);
    startX = evt.clientX;
    startY = evt.clientY;
    scrollX = div.scrollLeft;
    scrollY = div.scrollTop;
    if (!evt.dataTransfer.getData('text/plain')) {	// No drag drop if data already set (user is drag and dropping a DOM item)
        evt.dataTransfer.setData('text/x-coords', '<<NoData>>');
        evt.dataTransfer.setDragImage(document.createElement('img'), 0, 0);
    }
}

function moveDrag(evt) {
    evt.preventDefault();
    if (evt.dataTransfer.getData('text/x-coords')) {
        div.scrollTop = divScrollY = scrollY + evt.clientY - startY;
        div.scrollLeft = divScrollX = scrollX + evt.clientX - startX;

        return true;
    }
    return false;
}

function dragEnd(evt) {
    div.scrollLeft = divScrollX;
    div.scrollTop = divScrollY;
}

div.addEventListener('dragstart', startDrag);
div.addEventListener('dragover', moveDrag);
div.addEventListener('dragend', dragEnd);