JSFiddle - React, Tailwind, and code Playground

by antoq

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


	<body>
		<div class="multiply-container">
			<div class="row multiply">Item 1</div>
			<div class="row multiply">Item 2</div>
			<div class="row multiply">Item 3</div>
			<div class="row multiply-group"> Group 1</div>
			<div class="row multiply">Item 4</div>
			<div class="row multiply-group"> Group 2 </div>
			<div class="row multiply">Item 5</div>
		</div>
	</body>

CSS

body {
 	background-color: #eee;
 	padding: 50px;
 }

.multiply {
	height: 45px;
	width: 100%;
	background-color: violet;
	border: 1px solid purple;
	margin: 0 auto; 
	text-align: center;
}


.multiply-group {
	height: 25px;
	width: 100%;
	background-color: teal; 
	border: 2px solid orange;
	margin: 0 auto;
	text-align: center;
}

.multiply-container {
	background-color: lime;
	padding: 20px;
}

.multiply-placeholder {
	height: 65px;
	width: 100%;
}

.locked {
	padding: 20px;
	background-color: cyan;
	border: 1px solid blue;
}

JavaScript

var groupWrap = function(){

    $('.multiply-container').children().each(function(index, item){
        if($(item).hasClass('multiply-group')){
            $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>');
        }
    });
};

var updateMultiply = function(){

    var $container = $('.multiply-container');

    $container.children().each(function(index, item){
        if($(item).hasClass('locked')){
            $(item).children().each(function(i, elem){

                $container.append($(elem));

            });
            $(item).remove();
        }
        

    });

    groupWrap();

    $('.multiply-container').sortable({
        connectWith: '.locked',
        helper: 'clone',
        axis: 'y',
        update: function(){
            updateMultiply();
        }
    });

    $('.locked').sortable({
        connectWith: '.multiply-container, .locked',
        helper: 'clone',
        axis: 'y',
        update: function(){
            updateMultiply();
        },
        receive: function(event, ui){

            if($(ui.item).hasClass('locked')){
                $(ui.sender).sortable('cancel');

                return false;
            }

        }
    });

};


updateMultiply();