javascript 鼠標(biāo)拖動(dòng)圖標(biāo)技術(shù)
更新時(shí)間：2010年02月07日 11:59:40 作者：
剛剛學(xué)習(xí)了個(gè)js的小技術(shù)，還蠻好玩的，以后會(huì)把做的一些小例子貼上來，方便自己也可以跟大家一起分享學(xué)習(xí)成果，哈哈~~
這個(gè)例子簡單講就是鼠標(biāo)拖動(dòng)圖標(biāo)到它任意想去的地方
代碼
<body>
<div id="block" style="width:100px; height:100px; position:relative; background-color:#FF0000";></div>
<script>
var bb = document.getElementById("block");
bb.onmousedown = function(){
//獲取鼠標(biāo)當(dāng)前坐標(biāo)
var pageX = event.clientX;
var pageY = event.clientY;
//獲取block的坐標(biāo)，左邊界和上邊界
var offX = parseInt(this.style.left)||0;
var offY = parseInt(this.style.top)||0;
//計(jì)算出鼠標(biāo)坐標(biāo)相對(duì)于block坐標(biāo)的間距
var offLX = pageX-offX;
var offLY = pageY-offY;
if(!document.onmousemove){
document.onmousemove = function(){
bb.style.left=event.clientX-offLX; //設(shè)置block的X坐標(biāo)
bb.style.top=event.clientY-offLY; //設(shè)置block的Y坐標(biāo)
}
}
}
document.onmouseup = function(){document.onmousemove = null;} //鼠標(biāo)彈起
</script>
</body>
代碼
復(fù)制代碼 代碼如下:
<body>
<div id="block" style="width:100px; height:100px; position:relative; background-color:#FF0000";></div>
<script>
var bb = document.getElementById("block");
bb.onmousedown = function(){
//獲取鼠標(biāo)當(dāng)前坐標(biāo)
var pageX = event.clientX;
var pageY = event.clientY;
//獲取block的坐標(biāo)，左邊界和上邊界
var offX = parseInt(this.style.left)||0;
var offY = parseInt(this.style.top)||0;
//計(jì)算出鼠標(biāo)坐標(biāo)相對(duì)于block坐標(biāo)的間距
var offLX = pageX-offX;
var offLY = pageY-offY;
if(!document.onmousemove){
document.onmousemove = function(){
bb.style.left=event.clientX-offLX; //設(shè)置block的X坐標(biāo)
bb.style.top=event.clientY-offLY; //設(shè)置block的Y坐標(biāo)
}
}
}
document.onmouseup = function(){document.onmousemove = null;} //鼠標(biāo)彈起
</script>
</body>
您可能感興趣的文章:
- openlayers實(shí)現(xiàn)地圖彈窗
- openlayers實(shí)現(xiàn)地圖測距測面
- vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果
- JavaScript獲取對(duì)象在頁面中位置坐標(biāo)的方法
- javascript實(shí)時(shí)獲取鼠標(biāo)坐標(biāo)值并顯示的方法
- javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法
- JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- 基于JavaScript實(shí)現(xiàn) 獲取鼠標(biāo)點(diǎn)擊位置坐標(biāo)的方法
- JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)（兼容IE、FireFox、Chrome）
- openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo)
相關(guān)文章
js multiple全選與取消全選實(shí)現(xiàn)代碼
本文章總結(jié)了利用jquery與js實(shí)現(xiàn)multiple全選與取消全選代碼有需要參考的朋友可參考下2012-12-12
詳解JavaScript添加給定的標(biāo)簽選項(xiàng)
這篇文章給大家分享了JavaScript實(shí)現(xiàn)添加給定的標(biāo)簽選項(xiàng)的相關(guān)知識(shí)點(diǎn)內(nèi)容以及代碼實(shí)例，有興趣的朋友們參考下。2018-09-09
js實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
JavaScript遍歷table表格中的某行某列并打印其值
這篇文章主要介紹了JavaScript遍歷table表格中的某行某列并打印其值,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了js 金額格式化來回轉(zhuǎn)換實(shí)現(xiàn),需要的朋友可以參考下2014-02-02
這篇文章主要介紹了js判斷移動(dòng)端是否安裝某款app的多種方法，感興趣的小伙伴們可以參考一下2015-12-12
JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)
這篇文章主要介紹了JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)的相關(guān)資料,需要的朋友可以參考下2016-05-05
JS斷點(diǎn)調(diào)試,即是在瀏覽器開發(fā)者工具中為JS代碼添加斷點(diǎn),讓JS執(zhí)行到某一特定位置停住,方便開發(fā)者對(duì)該處代碼段的分析,這篇文章主要介紹了JS打斷點(diǎn)的六種常用姿勢的相關(guān)資料,需要的朋友可以參考下2025-04-04
我們在寫CSS的時(shí)候，會(huì)遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個(gè)vue頁面都有。這個(gè)時(shí)候，我們可以把css掛載到全局上，供所有vue頁面使用，同時(shí)也方便修改。感興趣的同學(xué)可以參考一下2023-04-04
js實(shí)現(xiàn)鍵盤上下左右鍵選擇文字并顯示在文本框的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤上下左右鍵選擇文字并顯示在文本框的方法,涉及javascript操作鍵盤事件及文本框的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05