dragable

by manoj

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" href="http://gridster.net/demos/assets/demo.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="widgets" class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">Text</li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">Image</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">Video</li>
    </ul>
</div>
<hr />
<div id="grids" class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
            <header>|||</header>0</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
            <header>|||</header>1</li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
            <header>|||</header>2</li>
        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
            <header>|||</header>3</li>
        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
            <header>|||</header>4</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
            <header>|||</header>5</li>
        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
            <header>|||</header>6</li>
        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
            <header>|||</header>7</li>
        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
            <header>|||</header>8</li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
            <header>|||</header>9</li>
    </ul>
</div>

CSS

.gridster li header {
    background: #999;
    display: block;
    font-size: 20px;
    line-height: normal;
    padding: 4px 0 6px;
    margin-bottom: 20px;
    cursor: move;
}

JavaScript

var grids = $("#grids ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [100, 100],
    serialize_params: function ($w, wgd) {
        return {
            id: $($w).attr('data-id'),
            col: wgd.col,
            row: wgd.row,
            size_x: wgd.size_x,
            size_y: wgd.size_y
        };
    },
    helper: 'clone',
    resize: {
        enabled: true,
        max_size: [4, 4],
        min_size: [1, 1],
        stop: function (event, ui) {
            var positions = JSON.stringify(grids.serialize());

            $.post(
                "update.php", {
                items: positions
            },

            function (data) {
                // alert(data);
                // var s = gridster.serialize();
                // console.log(s);
                // alert(JSON.stringify(s));
            });
        }
    },
    draggable: {
        handle: 'header',
        stop: function (event, ui) {
            var positions = JSON.stringify(grids.serialize());

            $.post(
                "update.php", {
                items: positions
            },

            function (data) {
                // alert(data);
                // var s = gridster.serialize();
                // console.log(s);
                // alert(JSON.stringify(s));
            });
        }
    }
}).data('gridster');

var counts = 0;
var widgets = $("#widgets ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [100, 100]
}).data('gridster').disable();
$("#widgets ul li").draggable({
    helper: "clone",
    start: function () {
        if (counts < 1) {
            grids.add_widget('<li class="new preview-holder">New Widget</li>', 1, 1);
            counts++;
        }
    },
    drag: function () {}
});
$("#grids ul").droppable({
    over: function (event, ui) {
        // $( this ).addClass( "preview-holder" );
    },
    out: function (event, ui) {
        $(this).removeClass("ui-state-highlight");
    },
   ...