JS實現拖動div層移動

js實現拖動div層移動

在談到拖動div層之前，我們有必要來了解下下面js幾個屬性的區別---- pagex，pagey,layerx,layery,clientx,clienty,screenx,screeny,offsetx之間的區別！

pagex: 滑鼠在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化.(只有firefox等標準遊覽器特有，ie沒有)。

clientx: 滑鼠在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動而變化.

這兩個最主要的區別是在有滾動條的情況下，pagex是不隨滾動條變化而變化，clientx是在可視區域內的距離，不包括滾動條的距離。

screenx:滑鼠在螢幕上的位置,從螢幕左上角開始,這個沒有任何爭議.

offsetx和layerx

offsetxie特有,滑鼠相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值。

layerx: firefox特有,滑鼠相比較於當前座標系的位置,即如果觸發元素沒有設定絕對定位或相對定位,以頁面為參考點,如果有,將改變參考座標系,從觸發元素盒子模型的border區域的左上角為參考點也就是當觸發元素設定了相對或者絕對定位後,layerx和offsetx就幸福地生活在一起^-^,幾乎相等,唯一不同就是乙個從border為參考點,乙個以內容為參考點,ff從border開始.

pagex，pagey只有firefox特有，ie沒有，所以要針對遊覽器相容性寫個函式，jquery原始碼中這樣寫的，

所以我們也可以針對寫個公用的函式，**如下：

function
pagexy(e) 
}//firefox
return
}

offsetx 是ie特有的 layerx是firefox特有的，所以針對這兩個也可以寫個公用的函式 **如下：

function
offsetxy(e) 
}

想看div層拖動的話我！

拖動層的基本原理是：

首先先來理解下我們要在頁面上拖動某一塊到頁面上的另外乙個位置那麼肯定這塊元素是絕對定位的並且我們移動它時是不斷的改變他們的top值和left值！再者我們拖動它時候肯定要觸發事件！有 onmousedown事件！

那麼我們現在是要計算的是我們這個元素被拖動到頁面上的某個位置時的左上標的位置x和y。

如下圖所示：

要計算元素的左上的x和y座標如上圖所示：就是指x = clientx-offsetx + "px"; y= clienty-offsety + "px";

html和css**如下：

<
div 
id="father"
style
="border:0px solid red;width:200px;"
>
<
div 
id="a"
style
="background:red;width:100px;height:100px"
>長,寬都是100px
div>
<
div 
id="b"
style
="border-top:0px solid red;background:yellow;width:100px;height:100px;margin-left:100px;"
>
div>
div>
<
style
>
#odiv
style
>

js所有**如下：

function
pagexy(e) 
}//firefox
return
}function
offsetxy(e) 
}var $=function
(id);
$('a').onmousemove = function
(e) $('b').onmousemove = function
(e) 
function
text(e) 
window.onload = function
() ; 
} function
movediv(evt) 
function
drop(evt) 
};

JS實現拖動div層移動

JS實現DIV拖動

可拖動DIV層

純js實現積木（div）拖動效果

JS實現拖動div層移動

JS實現DIV拖動

可拖動DIV層

純js實現積木（div）拖動效果

相關推薦