drag & drop basic 2015.06.18

<!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);
        });

        $("#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");
            }
        });

            $("#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");
            });
            //#mymenu에 내가 선택한 메뉴들이 표로 표시(번호, 이름)되게 하기
    </script>
</body>
</html>