因一个项目的需要，需要在前端界面实现在折叠面板里拖曳控件到工作区的功能（类似于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>实现效果：
时间： 2024-10-12 13:18:19