【jQuery基础编程】jQuery-UI实现折叠面板里的控件拖曳

因一个项目的需要,需要在前端界面实现在折叠面板里拖曳控件到工作区的功能(类似于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基础编程】jQuery-UI实现折叠面板里的控件拖曳_第1张图片

你可能感兴趣的:(jquery,jquery-ui,折叠面板,拖曳控件)