JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
更新時(shí)間：2016年12月20日 09:45:07 作者：鬼畜十三
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能,涉及javascript面向?qū)ο笈c頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能。分享給大家供大家參考，具體如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script>
window.onload=function(){
new Drag("div1");
new Drag("div2");
}
function Drag(id)
{
var _this=this;
this.oDiv=document.getElementById(id);
this.disX=0;
this.disY=0;
this.oDiv.onmousedown=function(ev){
_this.fnDown(ev);
return false;
};
}
Drag.prototype.fnDown=function(ev)
{
var _this=this;
var oEvent=ev||event;
this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove=function(ev){
_this.fnMove(ev);
};
document.onmouseup=function(){
_this.fnUp();
};
};
Drag.prototype.fnMove=function(ev)
{
var oEvent=ev||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.oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
}
this.oDiv.style.left=l+'px';
this.oDiv.style.top=t+'px';
};
Drag.prototype.fnUp=function()
{
document.onmousemove=null;
document.onmouseup=null;
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
繼承
function LimitDrag(id){
Drag.call(this,id); //繼承屬性
}
for(var i in Drag.prototype){
LimitDrag.prototype[i]=Drag.prototype[i];
}
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- javascript面向?qū)ο蟀b類Class封裝類庫(kù)剖析
- Javascript 面向?qū)ο螅ǘ┓庋b代碼
- Javascript 面向?qū)ο缶幊蹋ㄒ唬?封裝
- JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解
- jquery方法+js一般方法+js面向?qū)ο蠓椒▽?shí)現(xiàn)拖拽效果
- JS實(shí)現(xiàn)鼠標(biāo)按下拖拽效果
- JavaScript鼠標(biāo)拖拽事件詳解
- 純 JS 實(shí)現(xiàn)放大縮小拖拽功能(完整代碼)
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
- 詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
相關(guān)文章
自己實(shí)現(xiàn)string的substring方法 人民幣小寫(xiě)轉(zhuǎn)大寫(xiě)，數(shù)字反轉(zhuǎn)，正則優(yōu)化
這是最近碰到的幾個(gè)題目，簡(jiǎn)單地寫(xiě)一下我自己的方案，在此分享給大家，也希望能看到大家的方案2012-09-09
uniapp實(shí)現(xiàn)審批流程的具體操作步驟
這篇文章主要介紹了uniapp實(shí)現(xiàn)審批流程的具體操作方法,實(shí)現(xiàn)思路大概是需要要定義一個(gè)變量,記錄當(dāng)前激活的步驟,通過(guò)數(shù)組的長(zhǎng)度來(lái)循環(huán)數(shù)據(jù),如果有就采用3元一次進(jìn)行選擇,具體實(shí)現(xiàn)步驟跟隨小編一起看看吧2024-03-03
JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁(yè)面
這篇文章主要為大家詳細(xì)介紹了JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存實(shí)例詳解
這篇文章主要介紹了uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Form表單上傳文件（type="file"）的使用，以及過(guò)濾器解決中文亂碼問(wèn)題，需要的朋友可以參考下2017-08-08
讓插入到 innerHTML 中的 script 跑起來(lái)的實(shí)現(xiàn)代碼
在做 ajax 編程時(shí)，我們常常需要將 xmlhttp 獲取到的頁(yè)面內(nèi)容通過(guò) innerHTML 來(lái)賦給某個(gè)容器（比如 div、span 或者 td 等），但是這里存在一個(gè)問(wèn)題，就是我們將要賦給 innerHTML 的頁(yè)面內(nèi)容如果包含有腳本程序，這些腳本程序不管是外部腳本，還是內(nèi)部腳本，可能(1)都不會(huì)被執(zhí)行。2006-07-07
這篇文章主要介紹了ES6 中可以提升幸福度的小功能,在量解構(gòu)賦值的用途，函數(shù)的用處等方面給大家介紹，需要的朋友可以參考下2018-08-08
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-03-03
javascript模仿百萬(wàn)格子小的一小段代碼...2007-08-08
JavaScript設(shè)計(jì)模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式,簡(jiǎn)單描述了原型模式的概念、原理,并結(jié)合實(shí)例形式分析了ES5與ES6實(shí)現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07