JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div id="panel_1">Hello!</div>
<div id="panel_2">Hello!</div>
<img id="draggable" src="http://4fur.ru/data/49/42/494208d5aacbb87be21973585ba238dc.png" alt="" />

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    overflow: hidden; 
} 

#panel_1, #panel_2 { 
    position: fixed; 
    left: 0; 
    right: 0; 
    background: #fff; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    z-index: 550; 
} 

#panel_1 { 
    top: 0px;     
    border-bottom: 3px solid #EBEBEB;    
    border-radius: 0px 0px 50% 50% / 0px 0px 15px 15px; 
}

#panel_2 { 
    bottom: 0px;     
    border-top: 3px solid #DDDDDD; 
    border-radius: 50% 50% 0px 0px / 15px 15px 0px 0px; 
} 

#dragable { 
    position: absolute; z-index: 5; 
    cursor: hand; 
}

JavaScript

// Draggable //
$(function() {
    var min_x = $(window).width()-2560;
    var min_y = $(window).height()-1600;
    $( "#draggable" ).draggable({containment: [min_x,min_y,0,0]});  
});   

$(window).resize(function() {
    var min_x = $(window).width()-2560;
    var min_y = $(window).height()-1600;
    $( "#draggable" ).draggable( "option", 
                                 "containment", 
                                 [min_x,min_y,0,0] );   
});