Docking boxes (dbx)拖拽效果

一、参考网址   
 http://www.brothercake.com/site/resources/scripts/dbx/   

二、网页结构要求 

1）最外层容器要求有"dbx-group"类，并且要求有唯一的ID  

2）容器内，每个可以拖拽的元素，要有"dbx-box"类  

3）"dbx-box"元素内部，通常包含两个部分  

a.拖拽手柄(靠"dbx-handle"类来识别)   给该元素添加"dbx-handle"    

b.拖拽区域的内容（靠"dbx-content"类来识别）   给内容元素添加"dbx-content"类 

 三、添加CSS

1、核心CSS  将dbx manual中第二部分的CoreCSS复制，在DW中粘贴，保存为单独的CSS文件，存放到站点下  注意：该核心CSS中的规则，不允许修改，不允许重载  

2、根据需要添加用户定制的DBXCSS  

四、添加代码 

打开dbx manual第三部分“Implementing the script”  

1、初始化代码 

//initialise the docking boxes manager varmanager = new dbxManager(     

'main',            // session ID [/-_a-zA-Z0-9/]      

'yes',             // enable box-ID based dynamicgroups ['yes'|'no']    

'yes',             // hide source box while dragging['yes'|'no']    

'button'           // toggle button element type['link'|'button']     );  

2、dbxGroup代码

//create new docking boxes group 

 var purple = new dbxGroup(     

'purple',            // container ID [/-_a-zA-Z0-9/]，将来替换为自己的容器ID    

'vertical',          // orientation['vertical'|'horizontal'|'freeform'|'freeform-insert'|'confirm']     '7',                 // drag threshold ['n' pixels]     

'no',                // restrict drag movement tocontainer/axis ['yes'|'no']     

'10',                // animate re-ordering [framesper transition, or '0' for no effect]    'yes',               // includeopen/close toggle buttons ['yes'|'no']，是否包含打开关闭按钮      'open', // default state ['open'|'closed'] 默认的内容状态，如果选择open则栏目默认打开，如果选择closed，栏目初始关闭      

'open',    // word for "open", as in "open this box"  以下内容为提示信息，可以根据需要更换为中文     

'close',                                         // word for"close", as in "close this box"      'click-down and drag to move thisbox',          // sentence for "movethis box" by mouse     'click to%toggle% this box',                    // pattern-match
sentence for"(open|close) this box" by mouse           'use the arrow keys to move thisbox. ',         // sentence for"move this box" by keyboard     'press the enter key to %toggle% this box. ',    // pattern-match sentence-fragment for"(open|close) this
box" by keyboard           '%mytitle%  [%dbxtitle%]',                       // pattern-match syntaxfor title-attribute conflicts        'hitthe enter key to select this target',      // confirm dialog sentence for "selection okay"     'sorry, this target cannot
be selected'          // confirm dialog sentence for"selection not okay"    );   

五、实现栏目展开关闭 

1、要确保dbxGroup代码中，第六项为'yes' 

2、栏目初始展开状态，由dbxGroup代码第七项决定 

3、设置切换按钮（toggle）样式，以便该按钮在dbxhandle中正确定位 

1）因为该按钮是dbx handle的子对象，而且具有.dbx-toggle 类名，所以css规则，可以写为：   

.dbx-handle.dbx-toggle{   }

通常，该按钮为绝对定位，所以要设置dbx-handle元素为相对定位。

该按钮有两种状态：.dbx-toggle-open .dbx-toggle-closed  所以可以分别设置不同的背景图片，或样式，实现不同状态的按钮外观。   

.dbx-toggle-open   {     background-position:0 0;  //背景图片的位置是x=0,y=0 }   

.dbx-toggle-closed   {     background-position:0 -20px; //背景图片的位置是x=0, y=-20px}  

4、设置内容的关闭和展开样式  

 /* 内部内容展开 */.dbx-box-open .dbx-content  { }    

/* 内部内容关闭 */.dbx-box-closed .dbx-content  { }    

设置样式时，注意优先级，必要时可以添加!important  通常我们可以给两种状态设置不同的高度，注意关闭高度小于内容时，要添加over-flow:hidden，使其多余内容实现隐藏。

六：具体范例

<div class="dbx-group" id="purple">
<div id="XXXdbx" class="dbx-box " >
<div class=" dbx-handle ">

                </div>

       </div>

</div>

js引用：参见图例


下载地址：http://download.csdn.net/detail/lanfei12345/6408531