本文为大家分享了界面插件插件可分类的实现自由拖动排序的具体方法，供大家参考，具体内容如下

此为网上资源演示自己做了修改，记录下方便日后的学习。

效果展示：

代码展示：

！doctype htmlhtml lang='en '！-学习功能：使用框架的可分类的插件实现拖动排序作者：丽莎于2018-5-30-head meta charset=' utf-8 '标题终极版拖动排序/title meta name=' viewport ' content=' width=device-width，initial-scale=1' link rel='样式表href=' style * { margin 3360 0；padd : 0；盒子尺寸：边框盒子；} .容器{ width : 350 pxmargin : 60 px自动；}。显示器：块；clear:两者；} .拖动{宽度： 100%；高度： 60px向左浮动：边距：-8px 0；} ul Li {列表式：无；} .innerdiv { padding: 10px高度： 100%;} .innerdiv2 { border: 1px固体# bdb9b9背景# fff高度： 100%;} .移动{ width: 65px高度： 100%;背景：粉色；向右浮动：光标：指针；} .msg { display : inline-block；宽度： 130像素；padding: 6px 6px 6px 12px垂直对齐： 顶部；} .BTN { background : pink color : # fffpadding : 0px 10px border-radius : 4px；border : 1px h8 : 30pxcursor :指针；font-size : 1.4 rem向右浮动：右边距： 10px页边距-top : 10px；}/style脚本src=' http :http://cdn。bootcss。com/jquery/3。1 .0/jquery。量滴js '/script script src=' http :http://代码。jquery。com/ui/1。10 .4/jquery-ui。js/script/head body div class=' container ' ul class=' sortable ' Li id=' drag gable ' class=' drag gable 1 ' class=' drag ' div class=' inner div ' Li id=' drag ' div 6 ' class=' drag ' div class=' inner div ' div class=' inner div 2 ' div class=' move '/div span class=' msg ' list 6/span/div/Li/ul button class=' BTN '提交/button/div/body/html脚本$(function(){ var bttn=$(').集装箱BTN ')；var arr=var sort=$(' .可排序的')。可排序({ handle: ' .移动'，延迟： 0，光标： '移动'，回复： true，停止： bttn。click(函数(事件){//记录分类后的编号顺序数组var arr=$(' .可排序的')。可排序(“to array”)；控制台。日志；}) });});/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。