Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽

更新時(shí)間：2022年02月23日 08:30:02 作者：不懂代碼的程序員

這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽的具體代碼，供大家參考，具體內(nèi)容如下

需求：車型配置表，移動(dòng)端需要滑動(dòng)，并且多項(xiàng)配置的表需要聯(lián)動(dòng)對(duì)應(yīng)頭部分類名稱

要求：左側(cè) title 固定 / 頂部需要吸頂效果

處理方案：一開始打算使用table表格，但是發(fā)現(xiàn)不太好控制，后來就使用了div進(jìn)行模擬了table表格。左側(cè)title 和右側(cè)的表格屬于兩部分結(jié)構(gòu)。

然后移動(dòng)端的時(shí)候進(jìn)行相對(duì)定位，控制右側(cè)的盒子進(jìn)行聯(lián)動(dòng)并且實(shí)現(xiàn)滑動(dòng)效果

/*
? ? touchstart 事件
? ? touchmove ?事件
*/
?
const ContBox = $('.div');
/* 用ContBox的總寬度減去當(dāng)前可視化的窗口寬度 等于 可移動(dòng)的left最大值 */
const maxX = ContBox.width() - $('.demo').width();
ContBox.on({
? ? ? ? touchstart:function(e){
? ? ? ? ? ? var e = e || window.event;
? ? ? ? ? ? /* 獲取鼠標(biāo)點(diǎn)擊的位置 */
? ? ? ? ? ? startX = e.originalEvent.targetTouches[0].pageX;
? ? ? ? ? ? /* 獲取當(dāng)前元素的偏移 */
? ? ? ? ? ? sX=$(this).offset().left; /* 沒有用到 */
? ? ? ? },
? ? ? ? touchmove:function(e){
? ? ? ? ? ? var e = e || window.event;
? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? /* 移動(dòng)的同時(shí)不斷的獲取新的鼠標(biāo)位置 */
? ? ? ? ? ? moveX=e.originalEvent.targetTouches[0].pageX;
? ? ? ? ? ? /* 新的位置 減去 最開始的位置 等于 要移動(dòng)的值 */
? ? ? ? ? ? var frameX = moveX - startX;
? ? ? ? ? ? /* 獲取原有的 left 偏移量 + 要移動(dòng)的值 等于 最終移動(dòng)的值 */
? ? ? ? ? ? var moveLeft = parseInt(ContBox.css("left")) + frameX;
? ? ? ? ? ? if(moveLeft<=-maxX){
? ? ? ? ? ? ? ? moveLeft = -maxX
? ? ? ? ? ? }
? ? ? ? ? ? if(moveLeft >= 0){
? ? ? ? ? ? ? ? moveLeft = 0
? ? ? ? ? ? }
? ? ? ? ? ? ContBox.css({left:moveLeft});
? ? ? ? ? ? TitleBox.css({left:moveLeft});
? ? ? ? ? ? /* 鼠標(biāo)按下后 一直處于拖動(dòng)狀態(tài)的時(shí)候 把 新的 鼠標(biāo)位置 賦值給 startX ?*/
? ? ? ? ? ? /* 然后再次執(zhí)行回來 依舊等于 滑動(dòng)的新位置 減去 startX ?而不是 拖拽的時(shí)候 startX 一直處于 默認(rèn)的初始位置 */
? ? ? ? ? ? startX = moveX;
? ? ? ? },
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery插件開發(fā)之實(shí)現(xiàn)google+圈子選擇功能
最近項(xiàng)目中用到的一個(gè)效果，類似于Google+的添加圈子功能。本文插件約8成封裝，好多功能是依據(jù)項(xiàng)目中實(shí)際需求寫的。若要使用，可根據(jù)自身情況擴(kuò)展修改
2014-03-03
基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂播放器的代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂播放器的代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
JavaScript自動(dòng)生成年月范圍選擇功能完整示例【基于jQuery插件】
這篇文章主要介紹了JavaScript自動(dòng)生成年月范圍選擇功能,結(jié)合完整實(shí)例形式分析了基于jQuery插件的日期年月范圍自動(dòng)生成與選擇功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-09-09
js判斷checkbox是否選中個(gè)數(shù)的方法(超簡(jiǎn)單)
下面小編就為大家?guī)硪黄猨s判斷checkbox是否選中個(gè)數(shù)的方法(超簡(jiǎn)單)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
jquery操作select常見方法大全【7種情況】
這篇文章主要介紹了jquery操作select常見方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作select常見的7種情況與相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
牛叉的Jquery——Jquery與DOM對(duì)象的互相轉(zhuǎn)換及DOM的三種操作
Jquery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下
2015-10-10
jQuery事件綁定用法詳解(附bind和live的區(qū)別)
這篇文章主要介紹了jQuery事件綁定用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery事件綁定的實(shí)現(xiàn)原理與相關(guān)注意事項(xiàng),并附帶了相關(guān)綁定方法的使用說明,重點(diǎn)介紹了bind和live的區(qū)別,需要的朋友可以參考下
2016-01-01
jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
這篇文章主要介紹jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法,需要的朋友可以參考下
2014-06-06
自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行的實(shí)現(xiàn)
我們常常會(huì)遇到這樣的情況，一個(gè)系統(tǒng)中有大量的需要對(duì)一個(gè)行進(jìn)行復(fù)制添加，希望能夠進(jìn)行批量的操作，這個(gè)時(shí)候，我們就可以考慮把它做成一個(gè)jquery插件了.
2011-10-10
jquery選擇器的選擇使用及性能介紹
從這一講開始，我們將直正接觸一個(gè)JQ類庫，學(xué)習(xí)一下JQ的寫法，JQ的一些常用的命令等等，今天主要講的是JQ里的選擇器，這也是JQ的一大特點(diǎn)，這從它的名稱jQuery中可以看到，主要功力體現(xiàn)在查詢上
2013-01-01