失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html鼠标可拖动窗体 JS实现简单移动端鼠标拖拽

html鼠标可拖动窗体 JS实现简单移动端鼠标拖拽

时间:2023-03-12 23:18:48

相关推荐

html鼠标可拖动窗体 JS实现简单移动端鼠标拖拽

本文实例为大家分享了JS实现移动端鼠标拖拽的具体代码,供大家参考,具体内容如下

Document

#div {

width: 100%;

height: 200px;

background: rosybrown;

}

#button {

position: absolute;

}

看我的魔法屌不屌

var button = document.getElementById('button')

button.ontouchstart = function(e) {

var startX = e.touches[0].clientX - this.offsetLeft;

var startY = e.touches[0].clientY - this.offsetTop;

this.ontouchmove = function(e) {

button.style.left = e.touches[0].clientX - startX + 'px';

button.style.top = e.touches[0].clientY - startY + 'px';

}

}

button.ontouchend = function() {

button.ontouchmove = null;

}

更多精彩文章请点击专题: Javascript拖拽特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: -07-21

如果觉得《html鼠标可拖动窗体 JS实现简单移动端鼠标拖拽》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。