一、參考**
二、網頁結構要求
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
4、設定內容的關閉和展開樣式
/* 內部內容展開 */.dbx-box-open .dbx-content
/* 內部內容關閉 */.dbx-box-closed .dbx-content
設定樣式時，注意優先順序，必要時可以新增!important 通常我們可以給兩種狀態設定不同的高度，注意關閉高度小於內容時，要新增over-flow:hidden，使其多餘內容實現隱藏。
六：具體範例
js引用：參見圖例
vue 原型設計 拖拽 Vue實現簡單的拖拽效果
自定義指令v drag l 存在時 只能橫向拖拽 t 存在時 只能縱向拖拽 lt都存在時 可以任意方向拖拽拖拽 margin 0 padding 0 box modifiers el.addeventlistener mousedown handledowncb let disx,disy func...
前端開發入門到實戰 實現乙個div的拖拽效果
實現思路 滑鼠按下開始拖拽 記錄摁下滑鼠時的滑鼠位置以及元素位置 拖動滑鼠記下當前滑鼠的位置 滑鼠當前位置 摁下時滑鼠位置 滑鼠移動距離 元素位置 滑鼠移動距離 滑鼠摁下時元素的位置 class drag 滑鼠摁下時的滑鼠位置 this.startpoint let move e let end e...
高階拖拽（帶框拖拽）
右邊判斷div的left 瀏覽器的可視區clientwidth div的寬度,表示物體被拖出右邊 else if l document.documentelement.clientwidth div1.offsetwidth else if t document.documentelement.cl...