移动端实现图标拖拽效果

做一个像苹果手机桌面的HOME键一样的图标，实现图标按钮在页面上可拖拽效果。js代码如下：

window.onload = function () {var oDiv = document.getElementById('moveIcon');var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;oDiv.addEventListener('touchstart', function (e) {//e.preventDefault();disX = e.touches[0].clientX - this.offsetLeft;disY = e.touches[0].clientY - this.offsetTop;starX = e.touches[0].clientX;starY = e.touches[0].clientY;});oDiv.addEventListener('touchmove', function (e) {L = e.touches[0].clientX - disX;T = e.touches[0].clientY - disY;starXEnd = e.touches[0].clientX - starX;starYEnd = e.touches[0].clientY - starY;//console.log(L);if (L < 0) {L = 0;} else if (L > document.documentElement.clientWidth - this.offsetWidth) {L = document.documentElement.clientWidth - this.offsetWidth;}if (T < 0) {T = 0;} else if (T > document.documentElement.clientHeight - this.offsetHeight) {T = document.documentElement.clientHeight - this.offsetHeight;}moveX = L + 'px';moveY = T + 'px';//console.log(moveX);this.style.left = moveX;this.style.top = moveY;});
}

移动端实现图标拖拽效果相关推荐

移动端实现元素拖拽效果插件_基于自然流布局的可视化拖拽搭建平台设计方案...
LowCode 是高效.高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向--基于自然流布局的可视化搭建平台. ...
基于vue的移动端Icon图标拖拽（改变定位和使用transform）
功能介绍: 1.icon拖拽位移 2.边界判断 (仅在可视区域滑动,防止Icon丢失) 3.吸边处理(仅处理X轴方向) 开发遇到的问题: 1.ios 上拖拽时,body跟随滚动: 解决办法:在move ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑
前言提到元素拖拽,通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太过简陋, ...
百度地图添加标注及图标拖拽及给标注添加右键
功能要求:拖动地图上的图钉时,在某个位置进行标注.并给标注添加右键操作属性. [1]图标拖拽事件 var myIcon = new BMap.Icon("${ctx }/images/map ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
基本拖拽效果,使用 mousedown , mousemove , mouseup实现
1.一个div拖拽效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

移动端实现图标拖拽效果

移动端实现图标拖拽效果相关推荐

最新文章

热门文章