js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果
本文實(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";
//阻止頁(yè)面的滑動(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);
效果:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(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)簡(jiǎn)單選項(xiàng)卡與自動(dòng)切換效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡與自動(dòng)切換效果的方法,涉及javascript操作選項(xiàng)卡與自動(dòng)切換效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
經(jīng)過(guò)綁定元素時(shí)會(huì)多次觸發(fā)mouseover和mouseout事件
經(jīng)過(guò)綁定元素時(shí)會(huì)多次觸發(fā)mouseover和mouseout事件,針對(duì)這個(gè)問(wèn)題,下面有個(gè)不錯(cuò)的解決方法2014-02-02
javascript 頁(yè)面只自動(dòng)刷新一次
記得meta標(biāo)簽當(dāng)中有一個(gè)refresh的功能嗎?這是讓瀏覽的頁(yè)面刷新并可以轉(zhuǎn)到相應(yīng)的頁(yè)面,如果刷新本頁(yè)的話就會(huì)造成重復(fù)的刷新,現(xiàn)在我們就試試用腳本來(lái)實(shí)現(xiàn)只讓頁(yè)面刷新一次.2009-07-07
bootstrap table插件動(dòng)態(tài)加載表頭

