Escritorio Dashboard

by paska

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="dashboard">
    <div class="column">
        <div class="part">1 <a href="#" id="add">Agregar</a></div>
        <div class="part">3</div>
    </div>
    <div class="column">
        <div class="part part-grande">2</div>
    </div>
    <div class="column"></div>
</div>

CSS

.dashboard {
    overflow: hidden;
    height: 510px;
}

.column {
    width: 29%;
    float: left;
    /* Padding importante para "agregar" */
    padding-bottom: 10000px;
    margin-right: 2%;
    margin-left: 2%;
}

.part {
    width: 100%;
    height: 245px;
    border: 1px solid red;
    margin-bottom: 10px;
}
.part-grande { height: 500px; }

.portlet-placeholder {
    border: 1px dotted red;
    background-color: #fffafa;
    width: 100%;
    margin-bottom: 10px;
}

JavaScript

try {
    var MAX = 2;
    var droppableParent;
    $(".column").sortable({
        connectWith: ".column",
        placeholder: "portlet-placeholder ui-corner-all",
        start: function(ev, ui) {
            $(ui.placeholder).height($(ui.item).height());
            droppableParent = $(ui.item).parent();
        },
        receive: function(ev, ui) {
            var $this = $(this),
                $item = $(ui.item);
            if ($this.children(".part").length > MAX) {
                var other = $item.next();
                if (other.length == 0)
                    other = $item.prev();
                other.appendTo(droppableParent);
                return;
            }
        }
    });
    
    $("#add").on("click", function() {
        var part = $("<div></div>")
            .addClass("part")
            .html(Math.floor((Math.random() * 10) + 1));
        $(this).closest(".column").append(part);
        return false;
    });
}
catch (ex) {
    alert(ex.message);
}