JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div id="edit_menu">
    <button id="questions_toggle" href="#">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><h3>VF-300 Questions<h3></div>
    	<div class="item">
    	<li style="float:left, height:40px, width:200px"><input value="question 1" type"text-area" style="border: medium none; width: 275px;"></li>
    	<span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item">
    	<li style="float:left, height:40px, width:200px"><input value="Question 2" style="border: medium none; width: 275px;"></li>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item">
    	<li style="float:left, height:40px, width:200px"><input value="Question 3" style="border: medium none; width: 275px;"></li>
 <span class="delete"><button>Delete Line</button></span>

    </div><hr>
</div>

<div id="answers">
	<div><h3>VF-300 Answer Formats<h3></div>
    <div class="item"><span>Answer 111111</span>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><span>Answer 222222</span>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><span>Answer 333333</span>
 <span class="delete"><button>Delete Line</button></span>

    </div><hr>
</div>

<div id="instructions">
	<div><h3>Instructions<h3></div>
    <div class="item"><span>Instructions 111111</span>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><span>Instructions 222222</span>
 <span class="delete"><button>Delete Line</button></span>

    </div>
    <div class="item"><span>Instructions 333333</span>
 <span class="delete"><button>Delete Line</button></span>

   ...

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;
}
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: 395px !important;
}
.info {
    text-align: center;
}

JavaScript

window.addEvent('domready', function(){

$$('.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 (dragging, edit_area) {

            dragging.destroy();

            item.removeClass('item');
            item.addClass('item_dz');

            var mySortables = new Sortables('', {
                clone: true,
                opacity: 0.4
            });

            setTimeout(function () {
                mySortables.addLists(edit_area);
            }, 1);


            if (edit_area != null) {
                item.clone().inject(edit_area);
                edit_area.highlight('#4679BD', 'transparent');
                item.removeClass('item_dz');
                item.addClass('item');
            }
        },
        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: function () {
        this.tween('opacity', '1');
        this.getParent(['.item_dz']).fade(0.3);
        this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
    },
    mouseleave: function () {
        this.tween('opacity', '0.7');
        this.getParent(['.item_dz']).fade(1);
        this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
   ...