JSFiddle - React, Tailwind, and code Playground

by AntonLapshin

HTML

<div id="win1" class="dialog" header-data="Текст">
        <div class="close"></div>            
        Контент 123 
    </div>
    <div id="win2" class="dialog" header-data="Картинка">
        <div class="close"></div>            
        <img src="http://109.171.98.218/production/Images/picHouse.png" />
    </div>
<!--
    <div id="win3" class="dialog" header-data="Окно без крестика">
        Контент 123 123 fwer rfwerf werf erw ferf werf werf wer w efv wevwefv wefv wefv wefv wefv wefv wefv w
    </div>-->

CSS

/*
#win1 { left: 5px; top: 5px; }
#win2 { left: 250px; top: 10px; }
#win3 { left: 250px; top: 250px; }
*/

.dialog 
{ 
    margin: 5px 10px 5px 5px;
    position: relative; 
    border: 1px solid black; 
    border-radius: 5px; 
    padding: 20px; 
    display: block;
    float: left;
    min-width: 150px;
    max-width: 300px;
    text-align: center;
}

.dialog:before 
{ 
    content: attr(header-data); 
    display: block; 
    height: 25px; 
    line-height: 25px; 
    background-color: #333; 
    color: white; 
    margin: -20px -20px 20px -20px; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px;     
}

.close
{
    font-family: calibri;
    font-size: 11pt;
    position: absolute; 
    right: 4px; 
    top: 4px;     
    width: 15px;
    height: 15px;
    line-height: 12px;
    vertical-align: middle;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 50%;
}
.close:hover
{
    background-color: green;
}
.close:after
{
    content: 'x';
}

JavaScript

var win1move = false
var xy = [];

$('.close').click(close);
$('#win1').mousedown(startmove);
$('#win1').mouseup(endmove);
$('#win1').mousemove(move);

function close(e)
{
    $(this).parent().fadeOut();
}
function startmove(e)
{
    //alert(e.clientX + " " + e.clientY);
    //alert(e.offsetX + " " + e.offsetY); 
    xy = [e.clientX, e.clientY, e.clientX - e.offsetX, e.clientY- e.offsetY];
    //alert(xy[0] + " " + xy[1] + " " + xy[2] + " " + xy[3]);            
    //alert((e.offsetX - e.clientX) + " " + (e.offsetY - e.clientY));
    //$(this).css("cursor", "move !important");
    win1move = true;
}
function endmove(e)
{
    //$(this).css('cursor', 'default');
    win1move = false;
}
function move(e)
{
    if (win1move == true)
    {
        $(this).css("left", xy[2] + e.clientX - xy[0]);
        $(this).css("top", xy[3] + e.clientY - xy[1]);    
    }
}