我是靠谱客的博主 听话机器猫,最近开发中收集的这篇文章主要介绍拖动div功能,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

前端开发过程中,魏莉操作方便,有时候弹框需要拖动,代码如下:

function darg(obj){
//移动窗口的步骤
//1、按下鼠标左键
//2、移动鼠标
obj.mousedown(function(e){
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function(e){
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if(x<0){
x=0;
}else if(x>$(document).width()-obj.outerWidth(true)){
x = $(document).width()-obj.outerWidth(true);
}
if(y<0){
y=0;
}else if(y>$(document).height()-obj.outerHeight(true)){
y = $(document).height()-obj.outerHeight(true);
}
obj.css({
'left':x+'px',
'top':y+'px'
});
});
$(document).mouseup(function(){
$(document).off('mousemove');
});
});
};

 

最后

以上就是听话机器猫为你收集整理的拖动div功能的全部内容,希望文章能够帮你解决拖动div功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(62)

评论列表共有 0 条评论

立即
投稿
返回
顶部