可拖動的DIV

在做web ui設計的時候，拖動某個html元素已經成為一種不能忽視的使用者介面模式，比較典型的應用例子就是dialog，乙個元素是怎麼實現拖動的呢？其實原理非常簡單，要想實現首先得了解幾個基本知識。

絕對定位：只有把元素的position屬性設定為absolute並且或者fixed才可以實現拖動，預設情況下元素會按文件流中的位置自行決定其出現在頁面上的位置，是不能移動的，而絕對定位的元素可以使元素脫離文件流，相對於其定位的父元素或者螢幕定位，可以利用這點兒，通過改變元素與已定位父元素的位移來實現元素拖動。關於定位知識具體可以看看css布局 ——從display，position， float屬性談起。

滑鼠事件：當滑鼠按下、移動、彈起的時候都會觸發相應事件，當滑鼠按下的時候同時會觸發相應元素click事件，並且冒泡到document，上面提到改變元素與定位父容器位移可以在這些事件中實現。關於事件相關知識可以看看j**ascript與html互動——事件

寫個簡易的dialog供拖動測試使用

dialog

this is a draggable test.

看起來是醬紫的

為了簡單，這裡就不照顧瀏覽器相容性問題了，先基於chrome實現。上面的dialog定位夫容器為document，滑鼠event物件包含clientx和clienty兩個屬性，標識滑鼠當前相對viewport（可視視窗）位置，可以在移動的時候改變dialog的left和top屬性值實現其移動。

var isdialogtitle=false;
function down(e)
}function move(e)
}function up(e)
document.addeventlistener('mousedown',down);
document.addeventlistener('mousemove',move);
document.addeventlistener('mouseup',up);

這樣拖動效果就實現了，為了確保只有滑鼠點選dialog title的時候才拖動，當滑鼠按下的時候要判斷事件源，如果是dialog title區域的話，把isdialogtitle標記設為true，滑鼠移動的時候首先要判斷isdialogtitle，在滑鼠彈起的時候將標記設為false。

親自試過demo的同學肯定可以當開始移動的時候dialog會跳一下，這是怎麼個情況？仔細看看**發現在移動初始，**就把dialog的left和top設為了滑鼠當前位置，可是使用者在拖動的時候不會刻意去點dialog的左上角，這樣就跳了，soga！改進一下

var draggingobj=null; //dragging dialog
var diffx=0;
var diffy=0;
function down(e)
}function move(e)
}function up(e)
document.addeventlistener('mousedown',down);
document.addeventlistener('mousemove',move);
document.addeventlistener('mouseup',up);

經過改動後不再跳躍了，但是很暴露的感覺，最開始定義的三個變數都暴露在window下，而且這種寫法相當的沒有通用性，萬一以後dialog title變了呢，凡是用過此方法的地方都得改一遍，萬一title內部還有子元素，點選其子元素的時候怎麼辦？既然如此，穿件衣服封裝一下

var dragging=function(validatehandler)
break;
case 'mousemove':
if(draggingobj)
break;
case 'mouseup':
draggingobj =null;
diffx=0;
diffy=0;
break;}};
return ,
disable:function()}}

包裝一下果真變好看多了，**不難看懂，有幾個注意點，dragging函式的validatehandler引數並不是什麼阿貓阿狗，正如注釋所言為了解決剛才提到幾個需求變更問題，validatehandler是乙個自定義函式的控制代碼，這個函式用於識別點選元素是否觸發移動，是的話需要返回欲移動元素，這樣就可以靈活的觸發移動並決定移動那個元素了（點選的和移動的不一定是乙個），dragging函式返回乙個物件，物件中有兩個方法，分別可以使元素可移動/禁止移動，看看怎麼使用

function getdraggingdialog(e)
if(target!=null)else
}dragging(getdraggingdialog).enable();

首先定義乙個識別函式，然後作為引數呼叫dragging函式，並呼叫返回值的enable方法，這樣元素就可以拖動了。

dialog

this is a draggable test.

這種拖動處理方式看起來不錯了，但是還有幾點兒遺憾

1. 前面提到的瀏覽器相容性問題，這種寫法在低版本ie瀏覽器上是不能執行的

2. 邊界檢查，細心的同學發現dialog不但可以拖動了，還可以使頁面出現滾動條無限拖動，大部分情況下我們希望dialog在可視視窗、文件（固有滾動條內）或者固定區域內拖動，這種方式沒有做到此限制

3. 拖動卡頓，在這個demo中不會出現此問題，文件結構簡單拖動流暢，可視在龐大的頁面中如果滑鼠移動速度過快，dialog會跟不上滑鼠，出現卡頓，這時候如果滑鼠在dialog外面，mouseup事件不會生效，拖動就停不下來，只能把滑鼠移回dialog在mouseup

可拖動的DIV

可拖動DIV層

div可編輯可拖動

js彈出可拖動div

可拖動的DIV

可拖動DIV層

div可編輯 可拖動

js彈出可拖動div

相關推薦

div可編輯可拖動