drag & drop & json & localstorage(2015.06.19)

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>drag & drop</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.content div {width:500px;height:500px;display:inline-block;border:2px solid #666;}
#goods {background:#0f0;}
#goods div{width:100px;height:100px;float:left;margin:10px;background:#fff;}
#cart {background:#ff0;}
</style>
</head>
<body>
    <div class="content">
        <div id="goods">
            <div data-pno="1" data-incart="no" data-ox="" data-oy="">짬뽕</div>
            <div data-pno="2" data-incart="no" data-ox="" data-oy="">탕수육</div>
            <div data-pno="3" data-incart="no" data-ox="" data-oy="">볶음밥</div>
            <div data-pno="4" data-incart="no" data-ox="" data-oy="">짜장면</div>
            <div data-pno="5" data-incart="no" data-ox="" data-oy="">난자완쓰</div>
            <div data-pno="6" data-incart="no" data-ox="" data-oy="">잡채밥</div>
            <div data-pno="7" data-incart="no" data-ox="" data-oy="">쟁반짜장</div>
            <div data-pno="8" data-incart="no" data-ox="" data-oy="">유산슬</div>
        </div>
        <div id="cart"></div>
    </div>
    <div id="mymenu"></div>
    <script>
        var menus = $("#goods > div");
        $(menus).each(function(){
            var offset = $(this).offset();
            var ox = offset.left;
            var oy = offset.top;
            $(this).attr("data-ox",ox);
            $(this).attr("data-oy",oy);
        });

        var localData = $.parseJSON(localStorage.getItem('mymenus'));
        $(localData).each(function(key,value){
            var menuarr = value.split(",");
            var menu = $("#goods > div[data-pno='" + menuarr[0]  + "']");
            $(menu).attr("data-incart","yes");
            $(menu).offset({left:menuarr[1],top:menuarr[2]});

        });

        function savePosition(){
            var $mygoods = $("#goods > div[data-incart='yes']");
            var mymenus = [];
            var count = 0;
            $($mygoods).each(function(){
                var pno = $(this).attr("data-pno");
                var offset = $(this).offset();
                var newx = offset.left;
                var newy = offset.top;
                mymenus[count] = pno + "," + newx + "," + newy;
                count++;
            });
            var dataToStore = JSON.stringify(mymenus);
            localStorage.setItem('mymenus', dataToStore);
        }

        $("#goods > div").draggable({ revert: true });
        $("#cart").droppable({
            drop:function(event,ui){
                ui.draggable.draggable("option","revert",false);
                ui.draggable.draggable("option","containment","#cart");
                ui.draggable.attr("data-incart","yes");
                savePosition();
            }
        });

        $("#goods > div").dblclick(function(){
            $(this).draggable("option","revert",true);
            $(this).draggable("option","containment","");
            var ox = $(this).attr("data-ox");
            var oy = $(this).attr("data-oy");
            $(this).offset({left:ox,top:oy});
            $(this).attr("data-incart","no");
            savePosition();
        });


    </script>
</body>
</html>