手機端touch事件實現元素拖拽效果 2

標籤：

經上次的手機端拖拽事件，再次經過完善修改，加入了元素不能拖出螢幕範圍功能，並做了一個小的函數介面

ps：經落雨大神指點。

代碼如下：

            var touchEvent = (function(){ var oDiv = document.getElementsByTagName(‘div‘)[0],   //擷取可拖動元素     oIpt = document.getElementsByTagName(‘input‘)[0],    //記錄拖動元素位置    oIpt1 = document.getElementsByTagName(‘input‘)[1];     //記錄觸點位置  var touchSatrtFunc,touchMoveFunc,getTouchEvent;   var _this = this;         var opinion = {      //所需變數集oDiv : oDiv,oIpt : oIpt,oIpt1 : oIpt1,startX : "",    startY : "",    startPositionX : "",    startPositionY : "",    elemWidth : "",    elemHeight : "",    byWidth : "",    byHeight : ""}//觸摸點下事件touchSatrtFunc = function(e){e.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等      var touch = e.touches[0]; //擷取第一個觸點      var x = Number(touch.pageX); //頁面觸點X座標      var y = Number(touch.pageY); //頁面觸點Y座標    //記錄觸點初始位置      startX = x;    startY = y;    //可拖動元素距離頁面頂部的距離    startPositionY = oDiv.offsetTop;    //可拖動元素距離頁面左側的距離    startPositionX = oDiv.offsetLeft;    //可拖動元素的寬度    elemWidth = oDiv.offsetWidth;    //可拖動元素的高度    elemHeight = oDiv.offsetHeight;    //網頁可見地區寬    byWidth = document.documentElement.clientWidth ;    //網頁可見地區高    byHeight = document.documentElement.clientHeight  ;}//觸摸點下移動事件touchMoveFunc = function(e){e.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等    var touch = e.touches[0]; //擷取第一個觸點      var x = Number(touch.pageX); //頁面觸點X座標      var y = Number(touch.pageY); //頁面觸點Y座標     var fnyTop = startPositionY + (y-startY),    fnyLeft = startPositionX + (x-startX);    oIpt.value = "元素位置：" +startPositionX +":"+startPositionY;    oIpt1.value = "觸點位置：" +x +":"+y;    //判斷移動到邊緣情況    if(fnyLeft <= 0){    oDiv.style.left = 0;    if(fnyTop <= 0){    oDiv.style.top = 0;    }else if(fnyTop > 0 && fnyTop < (byHeight - elemHeight) ){    oDiv.style.top = fnyTop + ‘px‘;    }else if(fnyTop >= (byHeight - elemHeight) ){    oDiv.style.top = byHeight - elemHeight + ‘px‘;    }    }else if(fnyLeft >= (byWidth - elemWidth) ){    oDiv.style.left = byWidth - elemWidth + ‘px‘;    if(fnyTop <= 0){    oDiv.style.top = 0;    }else if(fnyTop > 0 && fnyTop < (byHeight - elemHeight) ){    oDiv.style.top = fnyTop + ‘px‘;    }else if(fnyTop >= (byHeight - elemHeight) ){    oDiv.style.top = byHeight - elemHeight + ‘px‘;    }    }else if(fnyLeft > 0 &&  fnyLeft < (byWidth - elemWidth) ){    oDiv.style.left = fnyLeft + ‘px‘;    if(fnyTop <= 0){    oDiv.style.top = 0;    }else if(fnyTop > 0 && fnyTop < (byHeight - elemHeight) ){    oDiv.style.top = fnyTop + ‘px‘;    }else if(fnyTop >= (byHeight - elemHeight) ){    oDiv.style.top = byHeight - elemHeight + ‘px‘;    }     }}var touchs = function(){oDiv.addEventListener(‘touchstart‘,touchSatrtFunc,false);     oDiv.addEventListener(‘touchmove‘,touchMoveFunc,false);}return {getTouch:touchs,touchSatrtFunc : touchSatrtFunc,touchMoveFunc : touchMoveFunc}    })();        

　　調用此方法時只需加入  touchEvent.getTouch();  即可

然而此代碼還有局限性，目前需要去原js中修改所需要的拖動的元素

 

手機端touch事件實現元素拖拽效果 2