jQuery用户界面可拖动可排序结合使用（实例讲解)

工作中需要将一个左边的设计好的控件，拖拽到右边的面板中，同时保持右边面板中的控件自由排序，这时候就需要及支持拖拽又支持排序的操作了，

演示截图：从左边控件拖到右边区域

代码段：

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

！DOCTYPE html html head meta charset=' utf-8 '/title/title link href=' js/bootstrap/CSS/bootstrap。CSS“rel=”外部no跟随“rel=”样式表/link href=' js/bootstrap/CSS/bootstrap-主题。量滴CSS ' rel='外部不跟随' rel='外部不跟随' rel='样式表'/脚本src=' http 3360 js '-Sortable-script src=' http://apps。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='框可拖动left-test2/div class='框可拖动'以上这篇jQuery用户界面可拖动可排序结合使用（实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。