Jquery是目前最常用的JavaScript库之一,可以方便地实现很多前端交互效果。在移动端中,我们经常会遇到需要拖动div的情况,下面就来介绍如何使用jQuery实现移动端拖动div。
$(document).ready(function(){
var myDiv = $("#myDiv");
var isMouseDown = false;
var currentX,currentY,startX,startY;
myDiv.mousedown(function(e){
e.preventDefault();
isMouseDown = true;
startX = e.pageX - myDiv.offset().left;
startY = e.pageY - myDiv.offset().top;
});
$(document).mouseup(function(){
isMouseDown = false;
});
$(document).mousemove(function(e){
if(isMouseDown){
currentX = e.pageX - myDiv.parent().offset().left - startX;
currentY = e.pageY - myDiv.parent().offset().top - startY;
myDiv.css({
left: currentX + "px",top: currentY + "px"
});
}
});
});
上面的代码就是实现移动端拖动div的代码,通过给div添加mousedown、mousemove和mouseup事件来实现。当鼠标按下时,获取鼠标点击位置与div左上角的距离,当鼠标移动时,计算div应当移动的位置,最后通过css方法实现div的移动。
需要注意的是,由于移动端的屏幕大小不一定相同,因此应当使用相对位置来移动div,即使用parent()方法获取div的父元素,再减去父元素的offset值,这样才能在不同屏幕上保证div的正确移动。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。