js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果
更新時(shí)間:2020年01月13日 14:15:37 作者:Come __ON
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果,供大家參考,具體內(nèi)容如下
1.html
<div id="div1"> <div id="div2"></div> </div>
2.js
var flag = false;
var cur = {
x: 0,
y: 0
}
var nx, ny, dx, dy, x, y;
function down() {
flag = true;
var touch;
if(event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
cur.x = touch.clientX;
cur.y = touch.clientY;
dx = div2.offsetLeft;
dy = div2.offsetTop;
}
function move() {
if(flag) {
var touch;
if(event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
nx = touch.clientX - cur.x;
ny = touch.clientY - cur.y;
x = dx + nx;
y = dy + ny;
div2.style.left = x + "px";
div2.style.top = y + "px";
//阻止頁面的滑動(dòng)默認(rèn)事件
document.addEventListener("touchmove", function() {
event.preventDefault();
}, false);
}
}
//鼠標(biāo)釋放時(shí)候的函數(shù)
function end() {
flag = false;
}
var div2 = document.getElementById("div2");
div2.addEventListener("mousedown", function() {
down();
}, false);
div2.addEventListener("touchstart", function() {
down();
}, false)
div2.addEventListener("mousemove", function() {
move();
}, false);
div2.addEventListener("touchmove", function() {
move();
}, false)
document.body.addEventListener("mouseup", function() {
end();
}, false);
div2.addEventListener("touchend", function() {
end();
}, false);
效果:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)選擇器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)選擇器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02
js實(shí)現(xiàn)簡單選項(xiàng)卡與自動(dòng)切換效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)簡單選項(xiàng)卡與自動(dòng)切換效果的方法,涉及javascript操作選項(xiàng)卡與自動(dòng)切換效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
經(jīng)過綁定元素時(shí)會多次觸發(fā)mouseover和mouseout事件
經(jīng)過綁定元素時(shí)會多次觸發(fā)mouseover和mouseout事件,針對這個(gè)問題,下面有個(gè)不錯(cuò)的解決方法2014-02-02
bootstrap table插件動(dòng)態(tài)加載表頭
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件動(dòng)態(tài)加載表頭,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2019-07-07 
