首页 新闻 搜索 专区 学院

ondragend拖拽确定方向

0
悬赏园豆:50 [已解决问题] 解决于 2017-08-04 21:30

html中DOM拖住事件 ondragend 那如何确定拖拽的方向是左还是右呢?

求大神 在线等 很急

下一次巅峰的主页 下一次巅峰 | 初学一级 | 园豆:5
提问于:2017-07-31 12:30
< >
分享
最佳答案
1
//根据起始位置坐标判断,下面这个是touch事件的方向判断,你只需要将事件名替换一下就ok了

<script> //返回角度 function GetSlideAngle(dx, dy) { returnMath.atan2(dy, dx) * 180 / Math.PI; } //根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动 function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; var dx = endX - startX; varresult = 0; //如果滑动距离太短 if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { returnresult; } varangle = GetSlideAngle(dx, dy); if(angle >= -45 && angle < 45) { result = 4; }else if (angle >= 45 && angle < 135) { result = 1; }else if (angle >= -135 && angle < -45) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } returnresult; } //滑动处理 var startX, startY; document.addEventListener('touchstart',function (ev) { startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; }, false); document.addEventListener('touchend',function (ev) { var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch(direction) { case 0: alert("没滑动"); break; case 1: alert("向上"); break; case 2: alert("向下"); break; case 3: alert("向左"); alert("!"); break; case 4: alert("向右"); break; default: } }, false); </script>
收获园豆:50
与阳光握手言和 | 菜鸟二级 |园豆:373 | 2017-07-31 14:11
其他回答(1)
0

可以和起始位置比较判断方向

mini_fan | 园豆:301 (菜鸟二级) | 2017-07-31 13:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册