JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<div id="draggable1" class="dragMe">1: Повозюкай меня :)</div>
<div id="draggable2" class="dragMe">2: и меня не забудь</div>

CSS

.dragMe { padding:1em;text-align:center; width:100px; height:70px; border-radius:.7em; background:silver; }

JavaScript

// http://codereview.stackexchange.com/questions/15656/feedback-on-js-that-drags-elements-around-page-and-saves-styles-to-localstorage
var ls = ls || {};
ls.set = function (key, value) {
    if (typeof value === "object") {
        value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
};
ls.get = function (key) {
    var value = localStorage.getItem(key);
    if (value && value[0] === "{") {
        value = JSON.parse(value);
    }
    return value;
};

$(function () {
    $(".dragMe").draggable({
        create : function (event, ui) {
            var position = ls.get("position:" + $(this).attr("id"));
            if(position){
                $(this).offset( position );
            }
        },
        stop : function (event, ui) {             
            var currentPos = ui.helper.position();
            ls.set("position:" + $(this).attr("id"), currentPos);
        }
    });
});