使用js實(shí)現(xiàn)的簡單拖拽效果
更新時(shí)間：2015年03月18日 09:48:42 投稿：hebedich
本文給大家分享的是使用純JS實(shí)現(xiàn)的簡單的拖拽效果的插件，算是對(duì)自己javascript學(xué)習(xí)的一個(gè)小的檢驗(yàn)，如果小伙伴們需要復(fù)雜的拖拽效果，還是考慮jQuery的draggable吧，更成熟一些。
前端開發(fā)的時(shí)候，有好多地方用到拖拽效果,當(dāng)然 http://jqueryui.com/draggable/ 是個(gè)不錯(cuò)的選擇,but 我是個(gè)打破砂鍋問到底的人，抽點(diǎn)時(shí)間用js小小的實(shí)現(xiàn)了類似的插件，話不多說。
first: html和css
復(fù)制代碼 代碼如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
position: absolute;
width: 100px;
height: 100px;
cursor: move;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
now,先把主要算法實(shí)現(xiàn)一下：
復(fù)制代碼 代碼如下:
<script>
window.onload = function () {
//獲取需要拖拽的div
var div1 = document.getElementById("div1");
//添加鼠標(biāo)按下事件
div1.onmousedown = function (evt) {
var oEvent = evt || event;
//獲取按下鼠標(biāo)到div left top的距離
var distanceX = oEvent.clientX - div1.offsetLeft;
var distanceY = oEvent.clientX - div1.offsetTop;
//添加doc滑動(dòng)時(shí)間
document.onmousemove = function (evt) {
var oEvent = evt || event;
//重新計(jì)算div的left top值
var left = oEvent.clientX - distanceX;
var top = oEvent.clientY - distanceY;
//left 當(dāng)小于等于零時(shí)，設(shè)置為零 防止div拖出document之外
if (left <= 0) {
left = 0;
}
//當(dāng)left 超過文檔右邊界 設(shè)置為右邊界
else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
left = document.documentElement.clientWidth - div1.offsetWidth;
}
if (top <= 0) {
top = 0;
}
else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
top = document.documentElement.clientHeight - div1.offsetHeight;
}
//重新給div賦值
div1.style.top = top + "px";
div1.style.left = left + "px";
}
//添加鼠標(biāo)抬起事件
div1.onmouseup = function () {
//清空事件
document.onmousemove = null;
div1.onmouseup = null;
}
}
}
</script>
yeah,使用面向?qū)ο髮?shí)現(xiàn)一下
復(fù)制代碼 代碼如下:
<style>
* {
margin:0;
padding:0;
}
#div1 {
width: 100px;
height: 100px;
background-color: red;
}
#div2 {
background-color:yellow;
width:100px;
height:100px;
}
</style>
<div id="div1"></div>
<div id="div2"></div>
js Draggle class:
復(fù)制代碼 代碼如下:
function Drag(id) {
this.div = document.getElementById(id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "absolute";
}
this.disX = 0;
this.disY = 0;
var _this = this;
this.div.onmousedown = function (evt) {
_this.getDistance(evt);
document.onmousemove = function (evt) {
_this.setPosition(evt);
}
_this.div.onmouseup = function () {
_this.clearEvent();
}
}
}
Drag.prototype.getDistance = function (evt) {
var oEvent = evt || event;
this.disX = oEvent.clientX - this.div.offsetLeft;
this.disY = oEvent.clientY - this.div.offsetTop;
}
Drag.prototype.setPosition = function (evt) {
var oEvent = evt || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
if (l <= 0) {
l = 0;
}
else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
l = document.documentElement.clientWidth - this.div.offsetWidth;
}
if (t <= 0) {
t = 0;
}
else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
t = document.documentElement.clientHeight - this.div.offsetHeight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
Drag.prototype.clearEvent = function () {
this.div.onmouseup = null;
document.onmousemove = null;
}
at last：最終實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
window.onload = function () {
new Drag("div1");
new Drag("div2");
}
效果如下:
以上所述就是本文的全部內(nèi)容了，希望能對(duì)大家更加熟練的掌握javascript有所幫助。
相關(guān)文章
覺得豬八戒網(wǎng)左下角的文字滾動(dòng)，效果不錯(cuò)！自己摸索了一下，以自己的方法實(shí)現(xiàn)了！沒有運(yùn)用jQuery,不過用了自己的編寫的Js庫！2011-10-10
6個(gè)DIV 間隔一秒 輪番進(jìn)行奇偶顯示. 比如先135 一秒后 246 然后再135 循環(huán)2010-07-07
僅在IE6/7/8下cssText返回值少了分號(hào)的測試代碼
在IE6/7/8中少了分號(hào)。使用cssText屬性時(shí)需注意。2011-03-03
中國這么大，要在一張小小地圖上畫上中國，那么就需要按一定的比例縮小。D3 可視化畫圖，也是如此。本文就來和大家聊聊D3中的比例尺的繪制與使用，感興趣的可以學(xué)習(xí)一下2022-11-11
任何編程都提出代碼復(fù)用，否則話每次開發(fā)一個(gè)新程序或者寫一個(gè)新功能都要全新編寫的話,效率太差了,接下來我們將針對(duì)代碼復(fù)用來進(jìn)行討論，需要的朋友可以參考下2012-12-12
uniapp實(shí)現(xiàn)審批流程的具體操作步驟
這篇文章主要介紹了uniapp實(shí)現(xiàn)審批流程的具體操作方法,實(shí)現(xiàn)思路大概是需要要定義一個(gè)變量,記錄當(dāng)前激活的步驟,通過數(shù)組的長度來循環(huán)數(shù)據(jù),如果有就采用3元一次進(jìn)行選擇,具體實(shí)現(xiàn)步驟跟隨小編一起看看吧2024-03-03
JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
ajax跨域調(diào)用webservice的實(shí)現(xiàn)代碼
這篇文章主要介紹了 ajax跨域調(diào)用webservice服務(wù)例子和理解，最近ajax訪問webservice遇到跨域的問題，網(wǎng)上搜索資料，總結(jié)如下2016-05-05
純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局（實(shí)例代碼）
這篇文章主要介紹了純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07