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 0px 5px 0px; padding: 5px; font-size: 1.2em; width: 100%; }

JavaScript

$(function() {
		
		$( ".connectedSortable" ).sortable({
			connectWith: ".connectedSortable",
			revert:400,
			receive: function(event,ui){
				funtioncall(ui)
			}
		})
		
		
	});
var Data= [
    { "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"] },
];
		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');
			for(var i = 0; i <= Data.length; i++){
				if (Data[i].Class == classNames){
						for( var j = 0; j <= Data[i].element.length; j++)
                        {
							if ( Data[i].element[j] == element)
                            {
                                alert("they matched")
                                return false;
						    }
					    }
                    alert("Sorry The Specific item Cannot be placed here!");
                    $(ui.sender).sortable('cancel');
                    return false;
				}
			}
		}