建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了JS如何實現(xiàn)移動端觸屏拖拽功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
js有什么特點
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
1.html
2.css
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#div1 {
width: 50px;
height: 50px;
background: cyan;
position: absolute;
}3.js
var div1 = document.querySelector('#div1');
//限制大寬高，不讓滑塊出去
var maxW = document.body.clientWidth - div1.offsetWidth;
var maxH = document.body.clientHeight - div1.offsetHeight;
//手指觸摸開始，記錄div的初始位置
div1.addEventListener('touchstart', function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = touch.clientX - div1.offsetLeft;
oT = touch.clientY - div1.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
});
//觸摸中的，位置記錄
div1.addEventListener('touchmove', function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
var oLeft = touch.clientX - oL;
var oTop = touch.clientY - oT;
if(oLeft < 0) {
oLeft = 0;
} else if(oLeft >= maxW) {
oLeft = maxW;
}
if(oTop < 0) {
oTop = 0;
} else if(oTop >= maxH) {
oTop = maxH;
}
div1.style.left = oLeft + 'px';
div1.style.top = oTop + 'px';
});
//觸摸結(jié)束時的處理
div1.addEventListener('touchend', function() {
document.removeEventListener("touchmove", defaultEvent);
});
//阻止默認事件
function defaultEvent(e) {
e.preventDefault();
}3.效果
4.幾點說明
對于觸屏手機端用手指事件，對于PC端用鼠標事件，其實原理都一樣。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS如何實現(xiàn)移動端觸屏拖拽功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設計公司，關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，更多相關知識等著你來學習!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網(wǎng)站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
網(wǎng)頁題目：JS如何實現(xiàn)移動端觸屏拖拽功能-創(chuàng)新互聯(lián)
鏈接地址：http://www.dlmjj.cn/article/dschgc.html
