JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- popover -->
<div id="popover-head" class="hide">Add new tab</div>
<div id="popover-content" class="hide">
    <form class="form-inline" id="pop-form" method="POST" action="../admin/FLT_add_tab.do">
        <div class="form-group">
            <!-- my form -->
            <input type="text" name="newTab" id="newTab" required="required" pattern="^[\S\s]{3,25}[A-z]+$" title="Only accept alphabet characters and length is minimum of 3 and max of 25 " placeholder="Tab name.." />
            <button class="btn btn-primary" type="submit"><i class="icon-white icon-ok"></i>

            </button>
            <button class="btn" type="button" onClick="popRemove();"><i class="icon-remove"></i>

            </button>
        </div>
        <p></p>
        <p style="color:red" id="error-message"></p>
    </form>
</div>
<div class="container-fluid" style="border-style:solid; border-width:5px;">
    <div class="row-fluid" id="container">
        <!-- Main Content -->
        <div class="span7">
            	<h1>Main</h1>

            <div id="preview"></div>
        </div>
        <!-- Sidebar content -->
        <div class="span5" id="sidebar">
            	<h1>Side</h1>

            <div class="question-constructor word-problem">
                <label for="textbox" class="question-label">#. Edit this to define question:</label>
                <input id="textbox" type="text" class="question-textbox" />
            </div>
            <!-- This should be a number problem? -->
            <div class="question-constructor multiple-choice-problem">
                <label for="textbox" class="question-label">#. Edit this to define question:</label>
                <input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;">
          ...

CSS

/**
 * Define droppable div(#preview)
 */
 #preview {
    padding: 10px 5px;
    min-height:10em;
    min-width: 23em;
}
/**
 * Define the dropping highlight of the draggable div
 */
 #preview .ph {
    height: 6em;
    padding: 3px;
    border: 1px dashed #aaa;
    background-color: #eee;
}
/**
 * Define the clone that has been drag
 */
 .on-drag {
    -moz-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
    background-color: white;
    min-width: 23em;
    width: 35em;
}
/**
 * Define the clone that has been drag on sort
 */
 .on-sort {
    -moz-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
    background-color: white;
    min-width: 23em;
    width: 35em;
}
/**
 * Define question style(.question-constructor)
 */
 .word-problem {
    cursor: pointer;
    padding: 15px 5px;
    min-height:3em;
    min-width: 23em;
}
/**
 * Define question style(.question-constructor)
 */
 .multiple-choice-problem {
    cursor: pointer;
    padding: 15px 5px;
    min-height:3em;
    min-width: 23em;
}

JavaScript

$(function () {
    $("#preview").on('click', '.question-constructor', function(e) {        
        e.preventDefault();
        $(".question-constructor").not(this).popover('hide');
    });
});
$(function () {
    $('#sidebar .question-constructor').draggable({
        connectToSortable: '#preview',
        scroll: false,
        helper: 'clone',
        cursorAt: {
            top: 56,
            left: 200
        },
        start: function (event, ui) {
            $(ui.helper).addClass('on-drag');
        }
    });
    
    $('#preview').sortable({
        placeholder: 'ph',
        start: function (event, ui) {
            $(ui.helper).addClass('on-sort');
        },
        stop: function (event, ui) {
            $(this).find('.on-sort').removeClass("on-sort");
        },
        receive: function (ev, ui) {
            //init popover
            $(this).data().sortable.currentItem.popover({
                content: "hallo world"
            });
        }
    });
});