JSFiddle - React, Tailwind, and code Playground

by Hushme

HTML

<ul class="connectedSortable width_25">
    <li class="ui-state-default" data-item='a'>Item a</li>
    <li class="ui-state-default" data-item='b'>Item b</li>
    <li class="ui-state-default" data-item='c'>Item c</li>
    <li class="ui-state-default" data-item='a'>Item a</li>
    <li class="ui-state-default" data-item='b'>Item b</li>
    <li class="ui-state-default" data-item='c'>Item c</li>
    <li class="ui-state-default" data-item='a'>Item a</li>
    <li class="ui-state-default" data-item='b'>Item b</li>
    <li class="ui-state-default" data-item='c'>Item c</li>
    <li class="ui-state-default" data-item='a'>Item a</li>
    <li class="ui-state-default" data-item='b'>Item b</li>
    <li class="ui-state-default" data-item='c'>Item c</li>

</ul>

<ul class="connectedSortable width_50">
        <li class="ui-state-default" data-item='c'>Item c</li>
        <li class="ui-state-default" data-item='d'>Item d</li>
        <li class="ui-state-default" data-item='e'>Item e</li>
        <li class="ui-state-default" data-item='c'>Item c</li>
        <li class="ui-state-default" data-item='d'>Item d</li>
        <li class="ui-state-default" data-item='e'>Item e</li>
        <li class="ui-state-default" data-item='c'>Item c</li>
        <li class="ui-state-default" data-item='d'>Item d</li>
        <li class="ui-state-default" data-item='e'>Item e</li>
        <li class="ui-state-default" data-item='c'>Item c</li>
        <li class="ui-state-default" data-item='d'>Item d</li>
        <li class="ui-state-default" data-item='e'>Item e</li>
</ul>

<ul class="connectedSortable width_75">
    <li class="ui-state-default" data-item='e'>Item e</li>
    <li class="ui-state-default" data-item='e'>Item e</li>
    <li class="ui-state-default" data-item='e'>Item e</li>
    <li class="ui-state-default" data-item='e'>Item e</li>
    <li class="ui-state-default" data-item='e'>Item e</li>
    <li class="ui-state-default" data-item='e'>Item e</li>
    <li class="ui-state-default"...

CSS

.connectedSortable { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;width:15%;
    padding-left:20px }
	.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 100%; }

JavaScript

$(function() {
		
		$( ".connectedSortable" ).sortable({
			connectWith: ".connectedSortable",
			revert:400,
			receive: function(event,ui){
				funtioncall(ui)
			}
		})
		
		
	});

	function funtioncall(ui){
		var itembox = $(ui.item.parent());
var classNames  = [];
$(itembox).each(function(i, el){
    var name = (el.className.match(/(^|\s)(width_[^\s]*)/) || [,,''])[2];
    if(name){
        classNames.push(name);
        //$(el).removeClass(name);
    }
});
		var element = $(ui.item) .attr('data-item');
	var objGroup= [
    {"Class":"width_25", "element": "a,b,c" },
    { "Class":"width_50", "element": "c,d,e" },
    { "Class":"width_75" ,"element": "e" },
    { "Class":"width_100", "element": "a,b" }
];	
	var cb = classNames.toString();
var found = objGroup.filter(function(item) {
    if (item.Class.split(',').indexOf(cb) >= 0) {
        return true;
    }
    return false;
});
var two = found.filter(function(item) {
    if (item.element.split(',').indexOf(element) >= 0) {
        return true;
    }
    return false;
});

if (two.length > 0) {
    alert('Matched Item');
	return false;
} else {
	alert("Sorry You cannot Placed here!");
$(ui.sender).sortable('cancel');
return false;	
}
		}