что то такое нужно ?
<style>
#di1{
width: 500px;
height: 500px;
background: red;
position: relative;
}
#id {
border: solid black 1px;
position: absolute;
}
</style>
<body>
<div id="di1">
<div id='id'></div>
</div>
</body>
<script>
var div = document.getElementById('di1');
var w = div.offsetWidth;
var h = div.offsetHeight;
var x,y;
console.log(w)
div.addEventListener('mousedown', function (e){
x = e.x; y = e.y;
div.onmousemove = fn;
div.onmouseup = function (e) {
div.onmousemove = null;
div.onmouseup = null
}
}, false)
function fn (e) {
var id = document.getElementById('id');
if(e.x < x) {
id.style.left = ''
id.style.right = (w - x) + 'px';
id.style.width = -1*(e.x - x) + 'px';
}
else {
id.style.left = x + 'px';
id.style.width = (e.x - x) + 'px';
}
if(e.y < y ) {
id.style.top = ''
id.style.bottom = (h - y) + 'px';
id.style.height = -1*(e.y - y) + 'px';
}
else {
id.style.top = y + 'px';
id.style.height = (e.y - y) + 'px';
}
}
</script>