JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<div id="drag"> Drag Me! </div>

CSS

#drag { width: 100px; height: 40px; color: #fdfdfd; background: #7f7664; font-size: 10px; text-transform: uppercase; font-famliy: arial, sans-serif; text-align: center; line-height: 40px;  }

JavaScript

$('#drag').draggable({ stop: function(){
        var now = new Date();
        now.setTime(now.getTime()+(365*24*60*60*1000));
        var expires = 'expires='+now.toGMTString() + '; ';
        var path = 'path=/';
        var name = 'position=';
        var value = $(this).attr( 'id' ) + ',' + $(this).css( 'left' ) + ',' + $(this).css( 'top' ) + '; ';
    
        var cookie = name + value + expires + path;
        document.cookie = cookie;
    }
});


$(document).ready( function(){
    var cookie = document.cookie;
    var settings = cookie.split( '=' )[1];
    var id = settings.split( ',' )[0];
    var left = settings.split( ',' )[1];
    var top = settings.split( ',' )[2];
        
    $('#' + id).css( { position: 'absolute', left: left, top: top } );

});