jQuery简单制作可拖拽div
博客专区 > imyfd 的博客 > 博客详情
jQuery简单制作可拖拽div
imyfd 发表于1年前
jQuery简单制作可拖拽div
  • 发表于 1年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

要知道如何制作拖拽div,要先初步构思流程。

大概流程如此:

1.先写出一个div

.move{
            width:100px;
            height:100px;
            position:absolute;
            top:200px;
            left:200px;
}

注意:div必须是绝对定位,否则无法拖拽移动。

首先,我们想要拖拽,必须要先在div中按下鼠标才能拖拽,按下后获取div在页面中的位置,在按下鼠标后,鼠标是在div中的不确定位置点击的,所以我们要获得鼠标点击的坐标,将鼠标的page坐标与div的 offset相减,得到鼠标到div边界的距离,在设置值为鼠标坐标与到div的距离相减,得到div坐标,设置监听事件,让鼠标移动时坐标的加减与div同步,即可做出拖拽效果,当鼠标放开时,拖拽结束,消除绑定函数。

还是从代码中研究吧。

<script>
			$('.move').mousedown(function(e){

				var offset = $(this).offset();//获取DIV在页面的位置 
				var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
				var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
				
				$(document).bind('mousemove',function(ev){

					var _x=ev.pageX-x;//鼠标与div同步
					var _y=ev.pageY-y; 

					$('.move').css('left',_x+'px').css('top',_y+'px');
				})
			});
			$(document).mouseup(function() 
			{ 
			$(this).unbind("mousemove"); //取消绑定
			}) 
		</script>

如果不想让div拖拽超过限定范围,添加一个返回函数就好了。

                    var _x=ev.pageX-x;//鼠标与div同步
					var _y=ev.pageY-y; 
					if(_x>1200){
						return false;
					};
标签: html javascript html5
共有 人打赏支持
粉丝 0
博文 3
码字总数 1502
×
imyfd
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: