JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main-panel">Drag chat window here</div>
<div id="chat-window">
<div id="chat-header"><span>Chat Window (press to drag)</span></div>
<input id="input-tf" type="text"/>
</div>
CSS
#main-panel {
display: block;
position: relative;
height: 90vh;
width: 500px;
border: 1px solid;
}
#chat-window {
height: 250px;
width: 250px;
border: 1px solid;
bottom: 0;
right: 0;
position: absolute;
overflow: hidden
}
#chat-header {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-color: #00e5ff;
border: 0 0 1px 0 solid black;
color: #fff;
cursor: move;
}
#input-tf {
width: 100%;
position: absolute;
bottom: 0
}
JavaScript
$(document).ready(function(){
var chatwin = $('#chat-window');
$('#chat-header').mousedown(function(e){
var startx = e.clientX;
var starty = e.clientY;
$('body').mousemove(function(e){
var dx = e.clientX-startx;
var dy = e.clientY-starty;
chatwin.css({
bottom: -dy,
right: -dx,
opacity: 0.2
});
});
}).mouseup(function(e){
var relX = e.pageX - $('#main-panel').offset().left;
var relY = e.pageY - $('#main-panel').offset().top;
if(relX<=$('#main-panel').width() && relY<=$('#main-panel').height()){
$('#main-panel').append(chatwin);
chatwin.css({
bottom: 0,
right: 0
});
chatwin.animate({
opacity: 1,
height: '100%',
width: '100%'
},1000);
}else{
chatwin.css({
bottom: 0,
right: 0,
opacity: 1
});
}
console.log($('#main-panel').width()+':'+$('#main-panel').height());
console.log(relX+':'+relY);
$('body').unbind('mousemove');
});
});