jquery实现拖拽功能

最新推荐文章于 2023-04-07 17:21:08 发布

是小王啊i

最新推荐文章于 2023-04-07 17:21:08 发布

阅读量1.1k

点赞数

文章标签： jquery css js javascript

本文链接：https://blog.csdn.net/qq_45378970/article/details/108903170

版权

jquery 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#box {
				width: 80px;
				height: 80px;
				background-color: red;
				position: absolute;
				left: 80px;
				top: 100px;
			}
		</style>
		<script src="jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="box"></div>
		<script>
			$(function() {
				$('#box').mousedown(function(e) {
					var e = e || window.event;
					var x= e.clientX - $(this).offset().left - $(this).outerWidth() / 2;
					var y= e.clientY - $(this).offset().top - $(this).outerHeight() / 2;
					$(document).mousemove(function(e) {
						var e = e || window.event;
						var l=e.clientX-x;
						var t=e.clientY-y;
						if (l < 0) {
							l = 0;
						} else if (l > $(this).scrollWidth - $('#box').outerWidth()) {
							l = $(this).scrollWidth - $('#box').outerWidth;
						}
						if(t<0){
							t=0;
						}else if(t>$(this).scrollHeight-$('#box').outerHeight()){
							t=$(this).scrollHeight-$('#box').outerHeight();
						}
						$('#box').css({
							'position':'absolute',
							'left':l,
							'top':t
						})
					})
					$(document).unbind('mouseup');
				})
			})
		</script>
	</body>
</html>

是小王啊i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现拖拽功能

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 80px; height: 80px; background-color: red
复制链接

扫一扫