JS實現(xiàn)簡單移動端鼠標(biāo)拖拽
更新時間：2020年07月23日 15:29:47 作者：渴望 Long For
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單移動端鼠標(biāo)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)移動端鼠標(biāo)拖拽的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div {
width: 100%;
height: 200px;
background: rosybrown;
}
#button {
position: absolute;
}
</style>
</head>
<body>
<div id="div">
<button id="button">看我的魔法屌不屌</button>
</div>
<script>
var button = document.getElementById('button')
button.ontouchstart = function(e) {
var startX = e.touches[0].clientX - this.offsetLeft;
var startY = e.touches[0].clientY - this.offsetTop;
this.ontouchmove = function(e) {
button.style.left = e.touches[0].clientX - startX + 'px';
button.style.top = e.touches[0].clientY - startY + 'px';
}
}
button.ontouchend = function() {
button.ontouchmove = null;
}
</script>
</body>
</html>
更多精彩文章請點擊專題： Javascript拖拽特效匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript實現(xiàn)文本收起展開(省略)功能
省略號,作為一種常見的文本處理方式,在很多情況下都十分常見,特別是當(dāng)我們需要在省略號后面添加額外文字時,本文為大家介紹了使用JavaScript實現(xiàn)文本收起展開功能的相關(guān)方法,希望對大家有所幫助2024-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript點擊按鈕生成4位隨機驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了js+css實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript中this的用法及this在不同應(yīng)用場景的作用解析
由于其運行期綁定的特性，JavaScript 中的 this 含義要豐富得多，它可以是全局對象、當(dāng)前對象或者任意對象，這完全取決于函數(shù)的調(diào)用方式，這篇文章主要給大家介紹了JavaScript中this的用法及this在不同應(yīng)用場景的作用解析，一起看看吧2017-04-04
簡單的分頁代碼js實現(xiàn)，分享給大家，感興趣的小伙伴們可以參考一下2016-05-05
javascript getElementsByTagName
DC大神為早期不支持getElementsByTagName的瀏覽器寫的hack，當(dāng)然與原生的不能同日而言，原生的用到緩存機制呢。2011-01-01
bootstrap tooltips在 angularJS中的使用方法
這篇文章主要介紹了bootstrap tooltips在 angularJS中的使用 ,需要的朋友可以參考下2019-04-04
斜杠可以在代碼中擁有多種含義，所以在 JavaScript 編程中，處理斜杠是一項非常重要的任務(wù)，本文就來帶大家一起來看看JavaScript是如何處理斜杠的2023-06-06
基于JavaScript實現(xiàn)熔巖燈效果導(dǎo)航菜單
這篇文章主要介紹了基于JavaScript實現(xiàn)熔巖燈效果導(dǎo)航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
大家都知道JS在很多情況下會進(jìn)行強制類型轉(zhuǎn)換，最常見的方式有兩種，在文章均給大家提到，下面小編給大家?guī)砹薐S在if中的強制類型轉(zhuǎn)換，感興趣的朋友一起看看吧2018-07-07