JSFiddle - React, Tailwind, and code Playground

by terrasoft

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0-beta.1/jquery-ui.min.js"></script>
<script src="http://yourjavascript.com/2815182410/fullscreen.js"></script>
<html>
<head>
<title>jQuery UI Bug Demo</title>

</head>

<body>

<button id="fullscreen" disabled="disabled">No Fullscreen Support</button>

<div id="draggable">Drag Me</div>

</body>

</html>

CSS

#draggable {
    
    border: 1px solid #999999;
    
    border-radius: 20px;
    
    color: #333333;
    
    cursor: -moz-grab;
    
    left: 100px;
    
    padding: 40px;
    
    position: absolute;
    
    text-align: center;
    
    top: 100px;
    
}


#fullscreen {
    
    background: #FDB3B4;
    
    border-color: red;
    
    font-weight: bold;
    
    left: 5px;
    
    padding: 10px;
    
    position: absolute;
    
    text-align: center;
    
    top: 5px;
    
}

#fullscreen[disabled] {
    
    background: #E6E6E6;
    
    border-color: #AAAAAA;
    
}

JavaScript

$( function() {
    
    $("#draggable").draggable( {
        
        snap: "body"
        
    } ).mousedown( function(event) {
        
        $(this).css("cursor", "-moz-grabbing");
        
    } ).mouseup( function(event) {
        
        $(this).css("cursor", "-moz-grab");
        
    } );
    
    if ($.support.fullscreen) {
        
        var $Btn = $("#fullscreen");
        
        $Btn
         .removeAttr("disabled")
         .text("Click Me First")
         .click( function(e) {
            
            $("body").fullScreen( {
                
                'background'    : '#FFFFFF',
                'callback'      : function(bFullscreen){
                    
                    if (bFullscreen)
                        $("#draggable").text("Drag Me... But it Won't Work");
                    
                }
                
            } );
            
        } );
        
    }
    
} );