JSFiddle - React, Tailwind, and code Playground

by xpnimi

HTML

<div id="notecards">
	<div class="note">
		note1
	</div>
	<div class="note">
		note2
	</div>
	<div class="note">
		note3
	</div>
</div>

CSS

#notecards {
	display: block;
	position: relative;
	margin: 60px 0;
	padding: 0;
	
	border: 1px solid blue;
}

.note {
	display: inline-block;
	position: relative;
	margin: 0;	
	padding: 1rem 1.5rem;

	
	vertical-align: top;
	
	border: 1px solid #ccc;
}

.note-on-note {
	background-color: red;
}

JavaScript

( function($) {

    $('.note').droppable({
		tolerance: 'pointer',
		over: function() {
			$(this).toggleClass('note-on-note');
		},
		out: function() {
			$(this).toggleClass('note-on-note')
		},
		drop: function() {
			$('.note').each().removeClass('note-on-note');
			
			// do ajax, eg. move note as subnote
		}
	});

    // #notecards div is sortable
    $('#notecards').sortable({
		revert: 200,
		refreshPositions: true,
		update: function() {
			// do ajax eg. Update posiotions
		}
	});
	

})(jQuery);