JS移動端實(shí)現(xiàn)拖拽的方法-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)JS移動端實(shí)現(xiàn)拖拽的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元邵原做網(wǎng)站,已為上家服務(wù),為邵原各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

移動端的項(xiàng)目經(jīng)常會引入手勢庫來實(shí)現(xiàn)拖拽

不過如果只是一兩個(gè)頁面用到拖拽，再引入一個(gè)手勢庫就很不劃算

最近的項(xiàng)目中就有這么一個(gè)需求：

因?yàn)榫瓦@一個(gè)地方需要拖拽，所以我就沒有引入第三方庫

移動端的拖拽有兩種主流的實(shí)現(xiàn)方案：

1. 將元素設(shè)置為固定定位，然后在拖拽的時(shí)候修改其定位，實(shí)現(xiàn)拖拽的效果；

2. 使用 transform 中的平移translate 屬性實(shí)現(xiàn)拖拽。

方案一：固定定位 fixed

這種方案的核心就是給元素添加固定定位position:fixed;

但定位之后，元素會脫離文檔流，會影響原有但布局

因此在開始拖拽 (觸發(fā)touchstart事件) 的時(shí)候，需要將原本的元素 A 拷貝一份 (cloneNode())

給新元素 A2 添加定位，同時(shí)給原本的元素 A 設(shè)置visibility:hidden; 使之隱藏并占位

1.1 創(chuàng)建遮罩

首先封裝一個(gè)創(chuàng)建遮罩的方法，用于放置拷貝出來的元素，并防止誤觸

createModal (id) {
 let modal = document.getElementById(id)
 if (!modal) { // 在沒有遮罩的時(shí)候創(chuàng)建遮罩
  modal = document.createElement('div')
  modal.id = id
  modal.style.cssText = `position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999;`
  document.body.appendChild(modal)
 }
},

本文題目：JS移動端實(shí)現(xiàn)拖拽的方法-創(chuàng)新互聯(lián)
文章路徑：http://m.jiaotiyi.com/article/hchcd.html