JSFiddle - React, Tailwind, and code Playground

by jagan2explore

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div class="demo">
            <ul id="sortable" class="ui-sortable">
                
                
                <li class="ui-state-default" style="">0</li>
                <li class="ui-state-default" style="">1</li>
                <li class="ui-state-default" style="">2</li>
                <li class="ui-state-default" style="">3</li>
                <li class="ui-state-default" style="">4</li>
                <li class="ui-state-default" style="">5</li>
                <li class="ui-state-default" style="">6</li>                                
            </ul>
        </div>

CSS

<style type="text/css">
            body {
                text-align: center
            }
            .demo {
                width: 580px;
                margin: 0 auto;
                text-align: left
            }
            #sortable {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 60%;
            }
            #sortable li {
                margin: 0 3px 3px 3px;
                padding: 0.4em;
                padding-left: 1.5em;
                font-size: 1.4em;
                height: 18px;
            }
            #sortable li span {
                position: absolute;
                margin-left: -1.3em;
            }
            #sortable li.highlights {
                background: yellow
            }
        </style>

JavaScript

$(function() {
                $('#sortable').sortable({
                    start : function(event, ui) {
                        var start_pos = ui.item.index();
                        ui.item.data('start_pos', start_pos);
                    },
                    change : function(event, ui) {
                        var start_pos = ui.item.data('start_pos');
                        var index = ui.placeholder.index();
						
					
/*					
					if (start_pos < index) {
					var current_position = index -1;
					}else {
					var current_position = index;
					}*/
					console.log(start_pos);
					console.log(index);
					
//					
//					if (current_position.prev() == index.next()){
//						console.log('Sort Change');
//					}
//					
//					if (current_position == (index) ){
//						console.log('Sort Change');
//						
//					}

                        if (start_pos < index) {
                            $('#sortable li:nth-child(' + index + ')').html(index-2);
                        } else {
                            $('#sortable li:eq(' + (index + 1) + ')').html(index + 1);
                        }
                    },
                    update : function(event, ui) {
						var index = ui.item.index();
						$('#sortable li:nth-child(' + (index + 1) + ')').html(index);
						
                    },
					axis : 'y'
                });
            });