JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;http://tinyurl.com/889ufwc&quot;&gt;"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul id="unassigned_list" class="connected_sortable">
        <li class="ui-state-default"><div class="draggable_area">Item 1</div><div class="click_area">&#8594;</div><div class="cl"></div></li> <li class="ui-state-default"><div class="draggable_area">Item 2</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
       
    </ul>
    
    <ul id="recipients_list" class="connected_sortable">
        <li class="ui-state-highlight"><div class="draggable_area">Item 1</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
        <li class="ui-state-highlight"><div class="draggable_area">Item 2</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
       
    </ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="sideBySide">
    <div class="panel panel-default">
      <div class="panel-heading">Selected students for the team 1</div>
      <div class="panel-body">
          <div class="right">
			<ul class="target connected ui-sortable">
					<li class="ui-sortable-handle" id="idstudent_24">3</li>
					<li class="ui-sortable-handle" id="idstudent_25">2</li>
					<li class="ui-sortable-handle" id="idstudent_26">3</li>
					<li class="ui-sortable-handle" id="idstudent_27">sw</li>
			</ul>
		</div>
          
      </div>

    </div>
    <div class="panel panel-default">
      <div class="panel-heading">Available students</div>
      <div class="panel-body">
          <div class="left">
			<ul class="source connected ui-sortable">
				
                <li class="ui-sortable-handle" id="idstudent_23"><div class="draggable_area">2</div><div...

CSS

.cl{
    clear: both;
    font-size: 0;
    height: 0;
    overflow: hidden;}   

#unassigned_list, #recipients_list {
    list-style-type: none;
    margin: 0;
    padding: 0 0 2.5em;
    float: left;
    margin-right: 10px;}

#unassigned_list li, #recipients_list li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;}

.draggable_area{
    float: left;
    width: 150px;
    height: 50px;}
                            
.click_area{
    width: 26px;
    float: right;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 26px;
    cursor: pointer;}

.sideBySide {
    margin: auto;
    overflow: hidden;
    width: 500px;
}

.sideBySide .left {
    float: left;
}


.sideBySide .right {
    float: right;
}

.sideBySide .left, .sideBySide .right {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 230px;
}

ul.source, ul.target {
	min-height: 50px;
	margin: 0px 25px 10px 0px;
	padding: 2px;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	list-style-type: none;
	list-style-position: inside;
}

ul.source {
	border-color: #f8e0b1;
}

ul.target {
	border-color: #add38d;
}

.source li, .target li {
	margin: 5px;
	padding: 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.source li {
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
	color: #c09853;
}

.target li {
	background-color: #ebf5e6;
	border: 1px solid #d6e9c6;
	color: #468847;
}

.sortable-dragging {
	border-color: #ccc !important;
	background-color: #fafafa !important;
	color: #bbb !important;
}

.sortable-placeholder {
	height: 40px;
}

.source .sortable-placeholder {
	border: 2px dashed #f8e0b1 !important;
	background-color: #fefcf5 !important;
}

.target .sortable-placeholder {
	border: 2px dashed #add38d !important;
	background-color: #f6fbf4 !important;
}

.source2 { list-style-type: none;...

JavaScript

$("#unassigned_list, #recipients_list").sortable({
    connectWith: ".connected_sortable",
    items: "li",
    handle: ".draggable_area",
    stop: function(event, ui) {
        updateLi(ui.item);
    }
}).disableSelection().on("click", ".click_area", function() {
    // First figure out which list the clicked element is NOT in...
    var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
    var li = $(this).closest("li");

    // Move the li to the other list. prependTo() can also be used instead of appendTo().
    li.detach().appendTo(otherUL);

    // Finally, switch the class on the li, and change the arrow's direction.
    updateLi(li);
});

function updateLi(li) {
    var clickArea = li.find(".click_area");
    if (li.closest("ul").is("#recipients_list")) {
        li.removeClass("ui-state-default").addClass("ui-state-highlight");
        clickArea.html('&#8592;');
    } else {
        li.removeClass("ui-state-highlight").addClass("ui-state-default");
        clickArea.html('&#8594;');
    }    
}

$(".source, .target").sortable({
    connectWith : ".connected",
    items: "li",
    handle: ".draggable_area",
    stop: function(event, ui) {
        updateLi2(ui.item);
    }
       
}).disableSelection().on("click", ".click_area", function() {
    // First figure out which list the clicked element is NOT in...
    var otherUL = $(".source, .target").not($(this).closest("ul"));
    var li = $(this).closest("li");

    // Move the li to the other list. prependTo() can also be used instead of appendTo().
    li.detach().appendTo(otherUL);

    // Finally, switch the class on the li, and change the arrow's direction.
    updateLi2(li);
});

function updateLi2(li) {
    var clickArea = li.find(".click_area");
    if (li.closest("ul").is(".target")) {
        li.removeClass("ui-state-default").addClass("ui-state-highlight");
        clickArea.html('X');
    } else {
       ...