DRAG AND DROP - CATEGORY BUILDER - BIZAMAJIG USAGE

by bizamajig

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drag 'n Drop</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" type="text/css" media="screen" />

<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>


    <div class="span9" id="main-container">

        <div class="row build-name">
            <div class="span9 border-dark">
                <div class="section-header"><h2>Build Name</h2></div>
                <div id="drop">
                    <ul class="sortable"></ul>
                </div>
            </div>
        </div> <!-- .row -->

        <div class="row content">
            <div class="span9 border-dark">
                <div class="section-header">
                    <h2>Content</h2>
                </div>

                <div id="objects">
                    <ul class="sortable">
                        <li class="animation">Animation content object</li>
                        <li class="text">Text content object</li>
                        <li class="image">Image content object</li>
                        <li class="animation">Animation content object</li>
                        <li class="text">Text content object</li>
                        <li class="image">Image content object</li>
                        <li class="animation">Animation content object</li>
                        <li class="text">Text content object</li>
                        <li class="image">Image content object</li>
                        <li...

CSS

/*RESET*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/*HTML5 elements*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/*END RESET*/

/***HELPER CLASSES***/
.right{
    float: right;
}
.border-dark{
    border: 1px solid #666;
}

/***SECTION HEADERS***/
.section-header{
    float: left;
    width: 100%;
    background-color: #2C2C2C;
}
.section-header h2{
    float: left;
    color: #ccc;
    padding: 10px;
    text-transform: uppercase;
    line-height: 20px;
    font-weight: normal;
}
.row.build-name, .row.content{
    padding-top: 15px;
}

/***BUILD NAME***/
#drop, #objects{
    background: #fff;
    float: left;
    width: 100%;
}
#drop{
    height: 205px;
    overflow-x: scroll;
}
#drop ul{
    /*Set width dynamically in the JS*/
    height: 185px;
    float: left;
}
#objects{
    height: 500px;
    max-height: 500px;
    overflow-y: scroll;
}
#objects li, #drop li{
    float: left;
    height: 150px;
    width: 16%;
    padding: 1%;
    margin: 1%;
    background: #ccc;
    list-style-type: none;
}
#drop li{
    width: 135px;
    padding: 10px;
    margin: 7px;
    position: relative;
}
.ui-draggable-dragging{
    width: 135px !important;
    padding: 10px !important;
    margin: 8px !important;
    position: absolute !important;
}
.sortable{
    float: left;
    width: 100%;
}
.sortable li{
    cursor:...

JavaScript

(function(){

    //Add close buttons to all list items
    $('ul.sortable li').append('<span class="close">x</span>');

    //Close event
    $('#drop ul li .close').live('click', function(){
        $(this).parent().remove().appendTo('#objects ul');
        adjustDropWidth();
    });

    //Item click events
    $('#objects ul li').live('click', function(){
        $(this).remove().appendTo('#drop ul');
        adjustDropWidth();
    });

    //Dynamically adjust width for drop area horiz scroll
    function adjustDropWidth(){
        var dropWidth = ($('#drop ul li').length * 172);
        if(dropWidth > ($('#drop').innerWidth()-11)) $('#drop ul').css('width', dropWidth);
    }

    $( ".sortable, .sortable" ).sortable({
        connectWith: ".sortable",
        over: function( event, ui ) {
            adjustDropWidth();
        }
    }).disableSelection();

}) ();