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"; //阻止頁(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-02js實(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-02javascript 頁(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)加載表頭
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件動(dòng)態(tài)加載表頭,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2019-07-07