淺析JavaScript動畫模擬拖拽原理
更新時間：2016年12月09日 09:00:10 作者：老板丶魚丸粗面
本文主要對JavaScript動畫模擬拖拽原理進行分析，步驟清晰，簡短的文字，深入的理解。需要的朋友可以看下
模擬拖拽的原理：
x1等于div.offsetLeft
y1等于div.offsetTop
x2等于ev.clientX(ev表示event事件)
y2等于ev.clientY
當(dāng)我們在方塊上按下鼠標(biāo)的時候，x2-x1即可確定。移動鼠標(biāo)之后，我們用鼠標(biāo)當(dāng)前的位置即x4、y4減去x2-x1、y2-y1就可以得到方塊現(xiàn)在的位置。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠標(biāo)按下
var ev = ev || event;
// 獲取鼠標(biāo)離div得距離
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
oBox.onmousemove = function(ev){
// 鼠標(biāo)按下左鍵并移動
var ev = ev || event;
// 設(shè)置div移動時，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
oBox.onmouseup = function(){
// 鼠標(biāo)左鍵抬起
oBox.onmousemove = oBox.onmouseup = null;
}
}
</script>
</body>
</html>
優(yōu)化代碼：
【1】鼠標(biāo)移動快的時候，鼠標(biāo)會移出方塊，這時方塊就不會再跟隨鼠標(biāo)動了。
解決辦法：就是將onmousemove和onmouseup加到document對象上
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠標(biāo)按下
var ev = ev || event;
// 獲取鼠標(biāo)離div得距離
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
document.onmousemove = function(ev){
// 鼠標(biāo)按下左鍵并移動
var ev = ev || event;
// 設(shè)置div移動時，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠標(biāo)左鍵抬起
document.onmousemove = document.onmouseup = null;
}
}
</script>
</body>
</html>
【2】當(dāng)要拖動的方塊中有文字時會觸發(fā)瀏覽器的默認(rèn)行為
解決辦法：1、使用return false添加到onmousedown事件中阻止瀏覽器的默認(rèn)行為（IE除外）
2、使用全局捕獲（IE）
1、使用return false添加到onmousedown事件中阻止瀏覽器的默認(rèn)行為（IE除外）
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box">模擬拖拽</div>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠標(biāo)按下
var ev = ev || event;
// 獲取鼠標(biāo)離div得距離
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
document.onmousemove = function(ev){
// 鼠標(biāo)按下左鍵并移動
var ev = ev || event;
// 設(shè)置div移動時，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠標(biāo)左鍵抬起
document.onmousemove = document.onmouseup = null;
}
// 阻止默認(rèn)行為
return false;
}
</script>
</body>
</html>
2、使用全局捕獲（IE）
全局捕獲：當(dāng)我們給一個元素這只全局捕獲后，改元素會監(jiān)聽后續(xù)發(fā)生的所有事件，當(dāng)有事件發(fā)生的時候就會觸發(fā)改元素的事件
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="button1" value="彈出1" />
<input type="button" id="button2" value="彈出2" />
<script type="text/javascript">
window.onload = function(){
var Btn1 = document.getElementById('button1');
var Btn2 = document.getElementById('button2');
Btn1.setCapture();
Btn1.onclick = function(){
alert(1);
}
Btn2.onclick = function(){
alert(2);
}
}
</script>
</body>
</html>
給Btn1設(shè)置了全局捕獲之后，即使我們點擊了Btn2還是會觸發(fā)Btn1的點擊事件
在模擬拖拽中，給要拖拽的方塊onmousedown添加全局捕獲然后再onmouseup中取消全局捕獲
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">模擬拖拽</div>
<script>
var oBox = document.getElementById('box');
oBox.onmousedown = function(ev){
// 鼠標(biāo)按下
var ev = ev || event;
// 獲取鼠標(biāo)離div得距離
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
// IE瀏覽器，全局捕獲
if(oBox.setCapture){
oBox.setCapture();
}
document.onmousemove = function(ev){
// 鼠標(biāo)按下左鍵并移動
var ev = ev || event;
// 設(shè)置div移動時，它的位置
oBox.style.left = ev.clientX - mouseBoxleft + 'px';
oBox.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠標(biāo)左鍵抬起
document.onmousemove = document.onmouseup = null;
//IE下，釋放全局捕獲 releaseCapture();
if ( oBox.releaseCapture ) {
oBox.releaseCapture();
}
}
// 阻止默認(rèn)行為
return false;
}
</script>
</body>
</html>
【3】封裝模擬拖拽函數(shù)
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">模擬拖拽</div>
<script>
var oBox = document.getElementById('box');
drag(oBox);
function drag(obj){
obj.onmousedown = function(ev){
// 鼠標(biāo)按下
var ev = ev || event;
// 獲取鼠標(biāo)離div得距離
var mouseBoxleft = ev.clientX - this.offsetLeft;
var mouseBoxTop = ev.clientY - this.offsetTop;
// IE瀏覽器，全局捕獲
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove = function(ev){
// 鼠標(biāo)按下左鍵并移動
var ev = ev || event;
// 設(shè)置div移動時，它的位置
obj.style.left = ev.clientX - mouseBoxleft + 'px';
obj.style.top = ev.clientY - mouseBoxleft + 'px';
}
document.onmouseup = function(){
// 鼠標(biāo)左鍵抬起
document.onmousemove = document.onmouseup = null;
//IE下，釋放全局捕獲 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
// 阻止默認(rèn)行為
return false;
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JavaScript如何實現(xiàn)對數(shù)字保留兩位小數(shù)一位自動補零
本文給大家介紹基于JavaScript如何實現(xiàn)對數(shù)字保留兩位小數(shù)一位自動補零的實例代碼，代碼簡單易懂，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實例代碼
這篇文章主要介紹了Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實例代碼,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了javascript實現(xiàn)簡單加載隨機色方塊的相關(guān)資料，感興趣的小伙伴們可以參考一下2015-12-12
如何將php數(shù)組或者對象傳遞給javascript
這篇文章主要介紹了將php數(shù)組或者對象傳遞給javascript的方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了JS簡單獲取及顯示當(dāng)前時間的方法,涉及javascript針對日期與時間的獲取與運算相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法
這篇文章主要介紹了javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法,實例分析了JavaScript基于ActiveXObject運行本地程序的技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問題,需要的朋友可以參考下2018-10-10
下面小編就為大家?guī)硪黄狫avaScript模擬文件拖選框樣式v1.0的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Node+OCR實現(xiàn)圖像文字識別功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了js實現(xiàn)非常簡單的焦點圖切換特效,是一個非常簡單的js焦點圖切換效果,涉及javascript操作鼠標(biāo)事件與圖片的相關(guān)技巧,需要的朋友可以參考下2015-05-05