jQuery-UI实现折叠面板里的控件拖曳

浏览数：40 / 时间：2015年06月09日

因一个项目的需要，需要在前端界面实现在折叠面板里拖曳控件到工作区的功能（类似于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>