JSFiddle - React, Tailwind, and code Playground

HTML

<div class="social-msl-col-links">
                
        		<section class="social-msl-group">
                    
        			<div class="social-msl-group-title social-msl-group-top">
                        <h3>Drag these icons</h3>
        			</div>
        			<div class="social-msl-group-list">
        			    <ul>
            				<li class="draggable">
            					<label>
            						<div class="social-msl-link-label-wrap">
            						    <div class="social-msl-link-label">
            							    <span class="social-icon"><i class="fa fa-facebook"></i></span> <span class="social-title">Facebook</span>
            						    </div>
            						</div>
            					</label>
            				</li>
            				<li class="draggable">
            					<label>
            						<div class="social-msl-link-label-wrap">
            						    <div class="social-msl-link-label">
            							    <span class="social-icon"><i class="fa fa-twitter"></i></span> <span class="social-title">Twitter</span>
            						    </div>
            						</div>
            					</label>
            				</li>
            				<li class="draggable">
            					<label>
            						<div class="social-msl-link-label-wrap">
            						    <div class="social-msl-link-label">
            							    <span class="social-icon"><i class="fa fa-pinterest"></i></span> <span class="social-title">Pinterest</span>
            						    </div>
            						</div>
            					</label>
            				</li>
            				<li class="draggable">
            					<label>
            						<div class="social-msl-link-label-wrap">
            						    <div class="social-msl-link-label">
            							    <span class="social-icon"><i class="fa fa-google-plus"></i></span> <span class="social-title">Google+</span>
            						    </div>
                					</div>
            					</label>
            				</li>
           ...

CSS

h3 {
    font-size: 1rem;
}
.social-msl-col-links {
    float: left;
    width: 50%;
}
.social-msl-group .social-msl-group-list .social-msl-link-label-wrap {
    padding: 0 1rem 0 0;
}
.social-msl-group .social-msl-group-list .social-msl-link-label-wrap .social-msl-link-label {
    padding: 0.5rem;
    cursor: move;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.social-msl-group .social-msl-group-list .social-msl-link-label-wrap .social-msl-link-label:hover {
    background: #fff;
}
.social-msl-col-details {
    float: left;
    width: 50%;
}
.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order {
    background: #ddd;
    padding: 1rem;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order h3 {
    padding: 0;
    margin: 0;
}
.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order ul li {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 1px dashed #bbb;
    float: left;
    margin: 0 0.5rem 0.5rem 0;
    overflow: hidden;
}
.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order ul li:hover {
    background: #fff;
}
.clear {
    clear: both;
}

JavaScript

$(".social-msl-link-label").draggable({
        connectToSortable: ".social-msl-group-list",
    	revert: "invalid",
    	helper: "clone"
    });

	$(".social-msl-links-order li").droppable({
		accept : ".social-msl-link-label",
		tolerance: 'pointer',
		greedy : true,
		hoverClass: 'highlight',
	    drop: function(ev, ui) {
	        $(ui.draggable).detach().css({position : 'relative', top: 'auto',left: 'auto'}).appendTo(this);
	    }
	});