<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background: orange;
border:10px solid green;
cursor:pointer;
/*鼠標(biāo)上面變小手*/
position:absolute;
}
</style>
</head>
<body>
<!-- 思路：
1:創(chuàng)建一個(gè)div署辉，拖拽對(duì)象
2:div的css樣式
3:鼠標(biāo)按下事件：獲取鼠標(biāo)位置瓶埋，鼠標(biāo)在div上的位置敏沉，窗口的位置
4:鼠標(biāo)移動(dòng)事件：
5鼠標(biāo)松開事件：獲取此時(shí)鼠標(biāo)的位置初厚，定位此時(shí)盒子的位置。
-->
<h1>拖拽</h1>
<hr>
<div class="box" id="box"></div>
<script>
//獲取box元素
var div = document.getElementById('box');
//給元素綁定 鼠標(biāo)按鍵按下事件
div.onmousedown = function(env){
//改變背景色
div.style.backgroundColor = "#999";
//獲取event對(duì)象
var e = env || window.event;
//求出 鼠標(biāo)在 div上的位置
var left = e.clientX - div.offsetLeft;
var top = e.clientY - div.offsetTop;
//求窗口的寬高
var w = window.innerWidth;
var h = window.innerHeight;
//綁定鼠標(biāo) 移動(dòng)事件
document.onmousemove = function(en){
//獲取event對(duì)象
var e = en || window.event;
//獲取鼠標(biāo)坐標(biāo)
var x = e.clientX;
var y = e.clientY;
//設(shè)置 div 的位置
div.style.left = Math.min(Math.max(x - left, 0), w - 220) +'px';
div.style.top = Math.min(Math.max(y - top, 0), h - 220)+ 'px';
}
}
//鼠標(biāo)按鍵抬起事件
div.onmouseup = function(){
div.style.backgroundColor = "orange";
//解除 onmousemove 事件綁定
document.onmousemove = function(){
}
}
</script>
</body>
</html>鼠標(biāo)事件的拖拽
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門视粮，熙熙樓的掌柜王于貴愁眉苦臉地迎上來细办，“玉大人，你說我怎么就攤上這事馒铃⌒诽冢” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵区宇，是天一觀的道長(zhǎng)娃殖。 經(jīng)常有香客問我，道長(zhǎng)议谷，這世上最難降的妖魔是什么炉爆？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮卧晓，結(jié)果婚禮上芬首，老公的妹妹穿的比我還像新娘。我一直安慰自己逼裆，他們只是感情好郁稍，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著胜宇，像睡著了一般耀怜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上桐愉，一...
- 文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼碎罚！你這毒婦竟也來了磅废？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤荆烈，失蹤者是張志新（化名）和其女友劉穎拯勉，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憔购，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡宫峦，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了玫鸟。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片导绷。...
- 正文 年R本政府宣布檐盟，位于F島的核電站褂萧，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏葵萎。R本人自食惡果不足惜导犹，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望羡忘。 院中可真熱鬧谎痢，春花似錦、人聲如沸卷雕。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)爽蝴。三九已至沐批，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間蝎亚，已是汗流浹背九孩。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長(zhǎng)得像梅惯，于是被迫代替她去往敵國(guó)和親宪拥。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
- 1铣减、垂直對(duì)齊 如果你用CSS她君，則你會(huì)有困惑：我該怎么垂直對(duì)齊容器中的元素？現(xiàn)在葫哗，利用CSS3的Transform缔刹，...
- 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font劣针，text－align校镐，li...
- 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font捺典，text－align鸟廓，li...
