jquery drag-and-drop plugin for drag sorting effects

The drag-and-drop sorting effect based on the jquery drag-and-drop plugin is a very useful drag-and-drop layout plugin. As follows:

Online preview Source Download

The implemented code.

HTML code:

<H1>Horizontal drag</H1> <Divclass= "Demo">    <Divclass= "Item Item1"><span>1</span></Div>    <Divclass= "Item Item2"><span>2</span></Div>    <Divclass= "Item Item3"><span>3</span></Div>    <Divclass= "Item Item4"><span>4</span></Div>    <Divclass= "Item Item5"><span>5</span></Div></Div> <Scriptsrc= "Js/jquery-1.11.3.min.js"></Script><Scriptsrc= "Js/jquery.dad.min.js"></Script><Script>$(function(){     $('. Demo'). Dad ();});</Script> <!--The following information is not relevant to the presentation and can be disregarded -<style>Body{margin:0;Border-left:200px Solid #ccc;}H1{width:1000px;margin:40px Auto;Font:32px "Microsoft Yahei";}. Demo{width:1000px;margin:0 Auto;}. Menu{position:Absolute; Left:0;Top:0;Bottom:0;width:200px;Padding-top:100px;font-family:consolas,arial, "The song Body";Background-color:#ccc;}. Menu a{Display:Block;Height:40px;margin:0 0 1px 2px;Padding-left:10px;Line-height:40px;font-size:14px;Color:#333;text-decoration:None;}. Menu A:hover{Background-color:#eee;}. menu. Cur{Color:#000;Background-color:#fff!important;}. Thead{width:728px;Height:90px;margin:0 Auto;Border-bottom:40px Solid Transparent;}</style>   <Divclass= "Menu">    <aclass= "cur"href= "Index.html">1. Horizontal Drag and drop</a>    <ahref= "index2.html">2, vertical drag and drop</a>    <ahref= "index3.html">3, multi-line drag and drop</a>    <ahref= "index4.html">4. Specify the drag area</a>    <ahref= "index5.html">5. Callback function</a>    <ahref= "index6.html">6. Allow/prohibit drag and drop</a>    <ahref= "index7.html">7. Garbage Basket</a>    <ahref= "index8.html">8. Imitation Shopping Cart</a></Div>

via:http://www.w2bc.com/article/93524

jquery drag-and-drop plugin for drag sorting effects