JSFiddle - React, Tailwind, and code Playground

by understore

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul>
	<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
	<li class="ui-state-default" data-id="111">Item 1</li>
	<li class="ui-state-default" data-id="222">Item 2</li>
	<li class="ui-state-default" data-id="333">Item 3</li>
	<li class="ui-state-default" data-id="444">Item 4</li>
	<li class="ui-state-default" data-id="555">Item 5</li>
</ul>

<button onclick="getJSON()">JSON 만들기</button>

JavaScript

// 라이브러리 사용하는 부분
	$( function() {
		$( "#sortable" ).sortable({
			revert: true
		});


	} );


// JSON 만들어지는 부분


function getJSON(){
	var data = [];
	$(".ui-sortable li").each(function( key, value ) {
      data.push({
      	"아이디": value.dataset.id,
        "이름" : value.textContent
      })
  });
  console.log(data);
}