jQueryUI可排序应用演示（分享)

最近工作用需要设计一个自由布局的页面设计。我选了jQuery用户界面的可分类的，可以拖拽，自由排序使用很方便，写一个演示，做个记录。

第一、单项目自由排序

下图效果

代码段：

脚本类型=' text/JavaScript ' $(function(){ $(' # box _ wrap ')).可排序({ helper: 'clone '，placeholder: 'box-holdplace '，sort:函数(e，ui) { //排序时触发事件}，//句柄： ' .手柄',//指定元素内的某种元素才可以拖动，非常有用}).禁用选择()；});/scripthtml:

！DOCTYPE html html head meta charset=' utf-8 '/title/title link href=' js/bootstrap/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表/link href=' js/bootstrap/CSS/bootstrap-主题。量滴CSS“rel=”外部no follow“rel=”样式表/link href=' CSS/index。CSS ' rel=' external nofollow ' rel=' external nofollow '-Sortable-script src=' http://app。bdimg。com/libs/jqueryui/1。10 .4/jquery-ui。量滴js/script/head dy div class=' box _ wrap ' id=' box _ wrap ' div class=' box ' test1/div class=' box ' test2/div class=' box ' test3/div/div/body/html第二、多排序组之间自由拖拽

代码段：

脚本类型=' text/JavaScript ' $(function(){ $(' # box _ wrap 1，#box_wrap2 ').可排序({ connectWith: ' .box_wrap '，helper: ' clone '，cursor: 'move '，//移动时候鼠标样式opacity: 0.5，//拖拽过程中透明度placeholder: 'box-holdplace '，//占位符类名，设置一个样式}).禁用选择()；});/scripthtml代码：

！DOCTYPE html html head meta charset=' utf-8 '/title/title link href=' js/bootstrap/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表/link href=' js/bootstrap/CSS/bootstrap-主题。量滴CSS“rel=”外部no follow“rel=”样式表/link href=' CSS/index。CSS ' rel=' external nofollow ' rel=' external nofollow '-Sortable-script src=' http://app。bdimg。com/libs/jqueryui/1。10 .4/jquery-ui。量滴js '/script/head dy div class=' container ' div class=' row ' div class=' col-MD-6 ' div class=' box _ wrap ' id=' box _ wrap 1 ' div class=' box ' left-test1/div class=' box ' left-test2/div class=' box ' left-test3/上面另种是工作中比较常用的排序形式。

以上这篇jQueryUI可排序应用演示（分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。