Sharp Jquery-7--query UI Effect Library-drag sort plug-in sortable

A simple drag sort effect, please refer to the jquery UI website demo.

jquery ui:http://jqueryui.com/

Sortable Example: http://jqueryui.com/sortable/#portlets

Effect

HTML code:

<styletype= "Text/css">#myList{width:80px;background:#EEE;padding:5px;List-style:None;}#myList a{text-decoration:None;Color:#0077B0;}#myList a:hover{text-decoration:Underline;}#myList. QLink{font-size:12px;Color:#666;Margin-left:10px;}. Ui-state-highlight{Height:1.5em;Line-height:1.2em; }    </style>   <ulID= "MyList">        <LiID= "Mylist_mood"><ahref="#">Mood</a></Li>        <LiID= "Mylist_photo">            <ahref="#">Album</a>            <ahref="#"class= "QLink">Upload</a>        </Li>        <LiID= "Mylist_blog">            <ahref="#">Log</a>            <ahref="#"class= "QLink">Published</a>        </Li>        <LiID= "Mylist_vote"><ahref="#">Vote</a></Li>        <LiID= "Mylist_share"><ahref="#">Share</a></Li>        <LiID= "Mylist_group"><ahref="#">Group</a></Li>    </ul>

JS Code:

<script type= "Text/javascript" src= "./js/jquery-1.11.3.js" ></script> <script type= "Text/javascript" Src= "./js/jui/jquery-ui.min.js" ></script> <script type= "Text/javascript" >$ (document). Ready (function(){            $("#myList"). Sortable ({delay:1,//Drag event delay 1ms to prevent collisions with ' click 'Stopfunction() {//events that are triggered when dragging is stopped and can be used for AJAX values                    vars = $ (' #myList '). Sortable (' serialize ');//gets the order of the current drag, mylist[]=blog&mylist[]=photo,li the underscore of the corresponding ID                    //alert (s);}, Placeholder:"Ui-state-highlight",//when dragging, the original position is occupied by a. Ui-state-highlight            }); $( "#myList"). Disableselection ();    }); </script>

Attention:

Note that the import of the jquery version and the Jquery.ui version of the match problem, the sharp jquery book examples are imported:

<script type= "Text/javascript" src= ". /.. /scripts/jquery-1.3.1.js "></script>
<script type= "Text/javascript" src= ". /.. /scripts/ui.core.js "></script>
<script type= "Text/javascript" src= ". /.. /scripts/ui.sortable.js "></script>

When the jquery version is changed to 1.11.*, the browser error can not find $.browser, $.ui, etc., the high version only need to import:

<script type= "Text/javascript" src= "./js/jquery-1.11.3.js" ></script>    <script type= "text/ JavaScript "src="./js/jui/jquery-ui.min.js "></script>

Sharp Jquery-7--query UI Effect Library-drag sort plug-in sortable