js實(shí)現(xiàn)小窗口拖拽效果
更新時(shí)間：2016年12月03日 10:27:00 作者：代碼小公主
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)小窗口拖拽效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)窗口拖拽的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
height: 300px;
width: 300px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
//鼠標(biāo)按下的函數(shù)
box.onmousedown = function(ev) {
var oEvent = ev || event;
//求出鼠標(biāo)和box的位置差值
var x = oEvent.clientX - box.offsetLeft;
var y = oEvent.clientY - box.offsetTop;
//鼠標(biāo)移動(dòng)的函數(shù)
//把事件加在document上，解決因?yàn)槭髽?biāo)移動(dòng)太快時(shí)，
//鼠標(biāo)超過box后就沒有了拖拽的效果的問題
document.onmousemove = function(ev) {
var oEvent = ev || event;
//保證拖拽框一直保持在瀏覽器窗口內(nèi)部，不能被拖出的瀏覽器窗口的范圍
var l = oEvent.clientX - x;
var t = oEvent.clientY - y;
if(l < 0) {
l = 0;
} else if(l > document.documentElement.clientWidth - box.offsetWidth) {
l = document.documentElement.clientWidth - box.offsetWidth;
}
if(t < 0) {
t = 0;
} else if(t > document.documentElement.clientHeight - box.offsetHeight) {
t = document.documentElement.clientHeight - box.offsetHeight;
}
box.style.left = l + "px";
box.style.top = t + "px";
}
//鼠標(biāo)抬起的函數(shù)
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
//火狐瀏覽器在拖拽空div時(shí)會(huì)出現(xiàn)bug
//return false阻止默認(rèn)事件，解決火狐的bug
return false;
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js顯示動(dòng)態(tài)時(shí)間的方法,較為詳細(xì)的分析了javascript中Date對(duì)象的常用方法及功能,并結(jié)合實(shí)例形式分析了JS時(shí)間顯示功能,需要的朋友可以參考下2016-08-08
js快速與任意QQ號(hào)碼建立臨時(shí)對(duì)話
那時(shí)候在群里討論的，吸納很多人的方法與意見，修改而成的2008-10-10
JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能,結(jié)合實(shí)例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
讓div層隨鼠標(biāo)移動(dòng)的實(shí)現(xiàn)代碼 ie ff
隨鼠標(biāo)移動(dòng)的div層使用ie ff ，大家可以注意下兼容性的問題。2009-12-12
JavaScript實(shí)現(xiàn)一個(gè)帶AI的井字棋游戲源碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)一個(gè)帶AI的井字棋游戲源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
Javascript 函數(shù)中的參數(shù)使用分析
關(guān)于JS中的函數(shù)，相信大家已經(jīng)很了解了，其中有些特性呢，感覺還是值得提一提的，下面就說說JS中的函數(shù)吧。2010-03-03
Web層改進(jìn)II-用xmlhttp 無聲息提交復(fù)雜表單
Web層改進(jìn)II-用xmlhttp 無聲息提交復(fù)雜表單...2007-01-01
javascript 中null和undefined區(qū)分和比較
這篇文章主要介紹了javascript 中null和undefined區(qū)分和比較的相關(guān)資料,需要的朋友可以參考下2017-04-04
本篇文章主要介紹了ES6 Proxy使用場景介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07