JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div class="vf">
    <div id="edit_menu">
        <p style="text-align: center; margin: -5px 5px 5px;">Form Elements Menu</p>
        <button href="#" id="questions_toggle" style="margin-left: 9px;">Questions<span id="questions_status"> show</span>

        </button>
        <button id="answers_toggle" href="#">Answer Type<span id="answers_status"> show</span>

        </button>
        <button id="instructions_toggle" href="#">Instructions<span id="instructions_status"> show</span>

        </button>
        <div id="questions">
            <div style="text-align: center;">
                 <h3>VF-300 Questions<h3></div>
    <div class="item">
		<li style="float:left, height:40px, width:200px">
			<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
   		</li>
    	<span class="delete"><button>Delete Line</button></span>
    </div>

	<div class="item">
    	<li style="float:left, height:40px, width:200px">
    		<textarea class="mooeditable" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
    	</li>
    	<span class="delete"><button>Delete Line</button></span>
    </div>
    
	<div class="item">
    		<textarea class="mooeditable" cols="43" rows="6" style="border: medium none; width: 240px;" name="vf300-Q3" form="GeneralVerdict">[or] 
    		
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
    	<span class="delete"><button>Delete Line</button></span>
    </div>
    
    <hr>
</div>

<div id="answers">
	<div style="text-align: center;"><h3>VF-300 Answer Formats<h3></div>
    <div class="item">
 ...

CSS

#edit_menu > button {
    height: 40px;
    width: 90px;
}
#edit_area {
    padding:20px;
    // border:2px solid #000;
}
.item, .item_dz {
    padding:10px;
}
.item, .item_dz, span :hover {
    cursor:move;
}
#edit_area .item_dz {
    padding:10px;
    border:2px dotted #000;
    margin-bottom:10px;
}
#questions .delete {
    display: none;
}
#answers .delete {
    display: none;
}
.delete {
    opacity:0.7;
    margin-left:20px;
    float:right;
}
.delete :hover {
    cursor: pointer;
    opacity:1;
}
.item > .delete {
    display:none;
}
#edit_menu .delete {
    display: none;
}
#edit_menu .delete *:hover {
    display: none;
}
//--------------- #questions, #answers, #instructions {
    border: thin dotted !important;
    padding-left: 5px !important;
}
#edit_right {
    margin-left: 300px;
    width: 625px;
}
#edit_menu {
    float: left;
    max-width: 305px;
    min-height: 75px;
}
li ~ .delete {
    bottom: 24px;
    position: relative;
}
.item_dz > li {
    margin-left: 15px;
}
.item > li {
    display: block;
}
.item input {
    cursor: move;
}
.item {
    padding: 10px;
}
.item_dz input {
    // border: medium inset #C0C0C0 !important;
    padding: 3px;
    width: 380px !important;
}
.info {
    text-align: center;
}
//------- #edit_area {
    border: 1px solid #C0C0C0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 2px 7px 13px rgba(50, 50, 50, 0.36);
    -webkit-box-shadow: 2px 7px 13px rgba(50, 50, 50, 0.36);
    -moz-box-shadow: 2px 7px 13px rgba(50, 50, 50, 0.36);
    padding: 20px;
    min-height: 105px !important;
}
#edit_area .item_dz {
    border-bottom: 1px dashed #000000;
    margin-bottom: 0;
    padding: 10px;
}
#edit_menu {
    border: thin solid #C0C0C0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 2px 7px 13px rgba(50, 50, 50, 0.36);
    -webkit-box-shadow: 2px 7px 13px rgba(50, 50, 50, 0.36);
    -moz-box-shadow: 2px 7px...

JavaScript

window.addEvent('domready', function () {
    var sortableItem_dz = new Sortables().addItems($$('.item_dz'));
    $$('.item').addEvent('mousedown', function (event) {
        if (event.target == this.getParent().getElement('.delete button')) return;
        event.stop();

        // `this` refers to the element with the .item class
        var item = this;

        var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
            opacity: 0.7,
            position: 'absolute'
        }).inject(document.body);

        var drag = new Drag.Move(clone, {

            droppables: $('edit_area'),

            onDrop: function (element, droppable) {

                if (!droppable) {
                    item.removeClass('item_dz');
                    item.addClass('item');
                    item.tween('background-color', '#FF0000', '#fff');

                } else {
                    item.removeClass('item');
                    item.addClass('item_dz');
                    item.clone().inject(edit_area);
                    edit_area.highlight('#4679BD', '#AFD2FF');
                    item.removeClass('item_dz');
                    item.addClass('item');

                    var mySortables = new Sortables('', {
                        clone: true,
                        opacity: 0.4,
                    });
                        mySortables.addLists(edit_area);
                }    
                element.dispose();
            },



            onEnter: function (dragging, edit_area) {
                edit_area.tween('background-color', '#9FFF8F');
            },
            onLeave: function (dragging, edit_area) {
                edit_area.tween('background-color', '#fff');
            },
            onCancel: function (dragging) {
                dragging.destroy();
                edit_area.tween('background-color', '#fff');
            }
        });
        drag.start(event);
    });



    $$('.delete').addEvents({
        mouseover:...