JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<ul id='list1'>
<li>1-A</li>
<li>2-A</li>
</ul>
<ul id='list2'>
<li>1-B</li>
<li>2-B</li>
</ul>
<ul id='list3'>
<li>1-C</li>
<li>2-C</li>
</ul>

CSS

ul{margin:10px;padding:10px;}
li{padding:10px;border:1px solid #ff0000;}

JavaScript

//And connect two list
//var connect={"#list1,#list2"};
$('#list1,#list2').sortable();
             
             /*
             step 1:move the 1-A to list2 
step 2:move the 1-B to list 3
step 3:move the 2-C to list 1
step 4:move the 1-B to list 2
I know that , when we use 'cancel' option, it only apply for the lastest step, but how can I reset my process to step 2 when the step 4 stoped?Thank alot..!
             */