ИА Лаб7 Зад3

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
    #sortable1, #sortable2 {
    position:relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    .deck li {
    cursor: pointer;
    position:absolute;
    top:0;
    left:0;
    margin: 3px;
    padding: 0.4em;
    font-size: 1.4em;
    height: 50px;
    width: 50px;
    border: 1px black solid;
    float: left;
    background: white;
    }

    #sortable2 li {
    cursor: pointer;
    margin: 3px;
    padding: 0.4em;
    font-size: 1.4em;
    height: 50px;
    width: 50px;
    border: 1px black solid;
    float: left;
    background: white;
    }


</style>
<script>
    $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();

        $("#sortable1, #sortable2").sortable().bind('sortstop', function() {
            $("#sortable1 li").css('position', 'absolute');
            $("#sortable2 li").css('position', 'relative');
        });
    });


</script>
</head>

<body>
<ul id="sortable1" style="height:75px;" class="connectedSortable deck">
<li>karta1</li>
<li>karta2</li>
<li>karta3</li>
<li>karta4</li>
<li>karta5</li>
<li>karta6</li>
<li>karta7</li>
</ul>
<br style="clear:both" />
<ul id="sortable2" style="width:600px; height:75px;border:2px red solid;" class="connectedSortable">
<li>karta8</li>

</ul>
</body>
</html>