JS如何實現(xiàn)移動端觸屏拖拽功能

這篇文章主要介紹了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

<div id="div1"></div>

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)移動端觸屏拖拽功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!