javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能

html部分

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

css部分

  <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            width: 100%;
            height:100%;
        }
        #div1 {
            width: 50px;
            height: 50px;
            background: cyan;
            position: absolute;
        }
    </style>

說明:*通配符慎用萧朝,一般引用reset.css來清除需要清除的margin,padding凭涂。

初始效果如下

2.png

js部分

    <script type="text/javascript">
          var div1=document.querySelector('#div1');
          var maxW=document.body.clientWidth-div1.offsetWidth;
          var maxH=document.body.clientHeight-div1.offsetHeight;

    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';

    })
    div1.addEventListener('touchend',function(){ 
       document.removeEventListener("touchmove",defaultEvent);
    })
    function defaultEvent(e) {


       e.preventDefault();
     }
</script>

變量說明:

maxW:div1可移動(dòng)的最大寬度
maxH:div1可移動(dòng)的最大高度
oL沙郭、oT:鼠標(biāo)所點(diǎn)位置的坐標(biāo)

實(shí)現(xiàn)效果:


1.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子渡贾,更是在濱河造成了極大的恐慌蛉抓,老刑警劉巖庆尘,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異芝雪,居然都是意外死亡减余,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門惩系,熙熙樓的掌柜王于貴愁眉苦臉地迎上來位岔,“玉大人如筛,你說我怎么就攤上這事∈闾В” “怎么了杨刨?”我有些...
    開封第一講書人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)擦剑。 經(jīng)常有香客問我妖胀,道長(zhǎng),這世上最難降的妖魔是什么惠勒? 我笑而不...
    開封第一講書人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任赚抡,我火速辦了婚禮,結(jié)果婚禮上纠屋,老公的妹妹穿的比我還像新娘涂臣。我一直安慰自己,他們只是感情好售担,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開白布赁遗。 她就那樣靜靜地躺著,像睡著了一般族铆。 火紅的嫁衣襯著肌膚如雪岩四。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評(píng)論 1 310
  • 那天哥攘,我揣著相機(jī)與錄音剖煌,去河邊找鬼。 笑死献丑,一個(gè)胖子當(dāng)著我的面吹牛末捣,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播创橄,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼箩做,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了妥畏?” 一聲冷哼從身側(cè)響起邦邦,我...
    開封第一講書人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎醉蚁,沒想到半個(gè)月后燃辖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡网棍,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年黔龟,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡氏身,死狀恐怖巍棱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蛋欣,我是刑警寧澤航徙,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站陷虎,受9級(jí)特大地震影響到踏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜尚猿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一窝稿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧谊路,春花似錦讹躯、人聲如沸菩彬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骗灶。三九已至惨恭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間耙旦,已是汗流浹背脱羡。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留免都,地道東北人锉罐。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像绕娘,于是被迫代替她去往敵國和親脓规。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案险领? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,759評(píng)論 1 92
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,560評(píng)論 32 459
  • ?前端面試題匯總 一侨舆、HTML和CSS 21 你做的頁面在哪些流覽器測(cè)試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評(píng)論 0 8
  • 前幾天臭笆,以服務(wù)周到著稱的海底撈栽了一個(gè)大跟頭。記者暗訪4個(gè)月,終于在廚房轉(zhuǎn)角遇到了煲湯的老鼠愁铺,還有如海苔般綠色的洗...
    小火咕嘟閱讀 450評(píng)論 0 0
  • 痛快了
    OK了啦閱讀 122評(píng)論 0 0