JavaScript簡(jiǎn)單拖拽效果（1）
更新時(shí)間：2017年05月17日 14:25:08 作者：GY_U_YG
這篇文章主要為大家詳細(xì)介紹了JavaScript簡(jiǎn)單拖拽效果
，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
拖拽在前端開(kāi)發(fā)中是很常見(jiàn)的功能，也是基本功之一，本文是不限制范圍的拖拽也就是最簡(jiǎn)單的拖拽，鼠標(biāo)按下對(duì)象，拖拽，松開(kāi)停止！
1，onmousedown事件
2，onmousemove事件
3，onmouseup事件
因?yàn)樵诎聪聲r(shí)拖動(dòng)，所以onmousemove事件在down后才注冊(cè)，up事件是用來(lái)解綁事件，消除事件！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡(jiǎn)單拖拽</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 100px;
height: 100px;
background: orange;
position: absolute;
}
</style>
</head>
<body style="height: 500000px;">
<div id="div1"></div>
<script type="text/javascript">
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev) {
var oEvent = ev || event;
// var disX = oEvent.clientX - oDiv.offsetLeft;
// var disY = oEvent.clientY - oDiv.offsetTop;
var disX = oEvent.clientX - parseInt(getStyle(oDiv, 'left'));
var disY = oEvent.clientY - parseInt(getStyle(oDiv, 'top'));
document.onmousemove = function(ev) {
var oEvent = ev || event;
oDiv.style.left = oEvent.clientX - disX + 'px';
oDiv.style.top = oEvent.clientY - disY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- js實(shí)現(xiàn)拖拽效果
- 百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 關(guān)于js拖拽上傳 [一個(gè)拖拽上傳修改頭像的流程]
- javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼
- js完美的div拖拽實(shí)例代碼
- 使用js實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
- javascript拖拽上傳類(lèi)庫(kù)DropzoneJS使用方法
- div拖拽插件——JQ.MoveBox.js(自制JQ插件)
相關(guān)文章
JavaScript用JSONP跨域請(qǐng)求數(shù)據(jù)實(shí)例詳解
Javascript跨域訪問(wèn)是web開(kāi)發(fā)者經(jīng)常遇到的問(wèn)題，什么是跨域，就是一個(gè)域上加載的腳本獲取或操作另一個(gè)域上的文檔屬性。下面這篇文章主要介紹了JavaScript用JSONP跨域請(qǐng)求數(shù)據(jù)的方法,需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
js實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置
本文主要介紹了利用javascript實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法，具有很好的參考作用，需要的朋友可以看看2016-12-12
D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
當(dāng)鼠標(biāo)滑過(guò)超鏈接出現(xiàn)提示框效果實(shí)例
當(dāng)鼠標(biāo)滑過(guò)超鏈接出現(xiàn)提示框效果實(shí)例，需要的朋友可以參考一下2013-04-04
JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法
這篇文章主要介紹了JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法,涉及javascript窗口操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法
這篇文章主要介紹了JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了JS原型和繼承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
今天小編就為大家分享一篇layui table 表格上添加日期控件的兩種方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JsRender for index循環(huán)索引用法詳解
這篇文章主要介紹了JsRender for index循環(huán)索引用法,以實(shí)例形式詳細(xì)分析了JsRender中循環(huán)的用法,需要的朋友可以參考下2014-10-10
用js來(lái)刷新當(dāng)前頁(yè)面保留參數(shù)的具體實(shí)現(xiàn)
本文為大家詳細(xì)介紹下如何使用js來(lái)刷新當(dāng)前頁(yè)面保留參數(shù)，下面有個(gè)不錯(cuò)的實(shí)現(xiàn)大家可以看看2013-12-12