【jQuery基础编程】jQuery-UI实现折叠面板里的控件拖曳
2015-04-25 16:58
417 查看
因一个项目的需要,需要在前端界面实现在折叠面板里拖曳控件到工作区的功能(类似于Android和MFC的可视化界面开发),于是就开始学起了强大的jQuery,发现里面的jQuery-UI有折叠面板、按钮等控件,但当在折叠面板里拖曳按钮时,按钮的拖曳范围只能是折叠面板内部,不能拖到工作区。所以这里绕了个弯实现了一下:
主要的实现过程是:首先在控件表明生成一个副本,每次拖曳控件的时候拖曳的都是副本,当拖曳完成,即鼠标弹起后,原控件表面就又生成一个副本待下次拖曳。(其他一些细节写在了注释里.)
代码:
实现效果:
主要的实现过程是:首先在控件表明生成一个副本,每次拖曳控件的时候拖曳的都是副本,当拖曳完成,即鼠标弹起后,原控件表面就又生成一个副本待下次拖曳。(其他一些细节写在了注释里.)
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>从折叠面板里拖曳元素</title> <script src="../jquery/jquery-1.11.2.min.js"></script> <script src="../jquery/jquery-ui.min.js"></script> <link href="../jquery/jquery-ui.min.css" rel="stylesheet"></link> <style> #accordion{ width:20em; } .accordion-button{ width:auto; height:auto; margin-left:1em; } .graggable{ } </style> </head> <body> <div id="accordion"> <h3><a href="#">按钮</a></h3> <div> <button id="button1" class="accordion-button">Button1</button> <button id="button2" class="accordion-button">Button2</button> </div> </div> </body> </html> <script> //元素事件 //change,click,dblclick,error,focus,focusin,focusout,keydown,keypress,keyup, //mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup,resize,scroll,select,submit,unload $("#button1").button(); $("#button2").button(); $("#accordion").accordion(); //将button2变为可拖曳元素,可测试出它只能在折叠面板内部拖动 $("#button2").draggable( {cancel:".title"}); //先在Button1上生成一个待拖曳控件 addElement($("#button1")); //新增一个x控件 function addElement(x){ //在现有控件之上生成一个新控件 var classAttr = "accordion-button graggable"; //获取元素内容 var text = x.text(); //元素CSS样式,主要是设置位置与原有元素相同 var styleAttr = 'style="position: absolute;top:'+ x.position().top +'px;left:'+ x.position().left+'px;"'; //设置元素 $elem = '<button '+styleAttr+'class="'+classAttr+' " role="button">'+ ''+text+'</button>'; $('body').append($elem); //添加元素 $(".graggable").button(); //设置元素 $(".graggable").draggable({cancel:".title"});//设置元素可拖曳 //给所有控件注册鼠标弹起事件,每弹起一次,就生成一个新的当前控件 $(".graggable").on("mouseup",function(){ addElement(x); }) } </script>
实现效果:
相关文章推荐
- jQuery-UI实现折叠面板里的控件拖曳
- UI基础第十四弹:实现UItableview控件Cell数据刷新
- UI基础第十三弹: UIScrollView控件实现图片轮播
- iOS开发UI基础—17UIScrollView控件实现图片缩放功能
- iOS开发UI基础—22实现UItableview控件数据刷新
- iOS开发UI基础—29UIScrollView控件实现图片轮播
- iOS部分-UI基础控件 - 01天 入门 第02课 加法计算器的实现
- jquery-ui日期时间控件实现
- jquery实现的Accordion折叠面板效果代码
- jquery实现的Accordion折叠面板效果代码
- jQuery实现的简单折叠菜单(折叠面板)效果代码
- Swift!代码实现UI基础控件
- Jquery组件easyUi实现手风琴(折叠面板)示例
- css+jquery实现折叠面板效果
- jquery实现折叠面板
- jquery.ui.draggble实现拖放控件效果
- Jquery实现的一个DIV层面板的折叠/展开效果
- jquery实现通用结构折叠面板效果
- jquery-ui日期时间控件实现
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)