jquery ui shopping cart

<!doctype html>
<html lang="en">
<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;display:inline-block;position:relative;}
#trash {width:150px;height:150px;background:black;position:absolute;top:10px;left:10px;}
#soldgoodslist {clear:both;margin-top:10px;border:2px solid #f00;background:#00f;color:#fff;width:1010px;height:50px;}
</style>
</head>
<body>
    <div class="content">
        <div id="goods">
            <div data-incart="false" id="p1" data-x="" data-y="">상품1</div>
            <div data-incart="false" id="p2" data-x="" data-y="">상품2</div>
            <div data-incart="false" id="p3" data-x="" data-y="">상품3</div>
            <div data-incart="false" id="p4" data-x="" data-y="">상품4</div>
            <div data-incart="false" id="p5" data-x="" data-y="">상품5</div>
            <div data-incart="false" id="p6" data-x="" data-y="">상품6</div>
            <div data-incart="false" id="p7" data-x="" data-y="">상품7</div>
            <div data-incart="false" id="p8" data-x="" data-y="">상품8</div>
        </div>
        <div id="cart"><div id="trash"></div></div>
    </div>
    <div id="soldgoodslist"></div>
    <script>
    $(function(){

        $("#goods > div").draggable({
            start:function(){
                $(this).draggable( "option", "revert", true );
                $(this).parent().children("div").css("zIndex",10);
                $(this).css("zIndex",100);
                if( $(this).attr("data-incart") != "true" ){
                    var offset = $( this ).offset();
                    var x = offset.left;
                    var y = offset.top;
                    $(this).attr("data-x", x);
                    $(this).attr("data-y", y);
                }
            }
        });

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

        $("#trash").droppable({
            drop: function(event,ui){
                var old_x = ui.draggable.attr("data-x");
                var old_y = ui.draggable.attr("data-y");
                ui.draggable.offset({ top: old_y, left: old_x });
                ui.draggable.attr("data-incart","false");
                checkSold();
            }
        });

        var soldcount = 0;
        function checkSold(){
            var soldlist = "";
            var goodslist = $("#goods > div");
            for (var i=0; i < goodslist.length; i++ ) {
                var incart = $(goodslist[i]).attr("data-incart");
                if(incart=="true") {
                    if(soldlist != "") soldlist += "/";
                    soldlist += $(goodslist[i]).attr("id");
                    soldcount++;
                }
            }
            $("#soldgoodslist").html(soldlist);
        }

    });

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