原生JQuery实现鼠标拖拽案例

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

原创最新推荐文章于 2023-04-07 17:21:08 发布 · 335 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用原生jQuery实现元素鼠标拖拽的方法。通过监听mousedown, mousemove和mouseup事件，计算并更新元素的位置，使网页元素能够跟随鼠标进行移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，这个是用原生的jquery实现的鼠标拖拽。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            div{
                width:100px;
                height:100px;
                background:red;
                position:absolute;
            }
        </style>
        <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
        <script>
            $(function(){
                var disX = 0;
                var disY = 0;
                $('div').mousedown(function(ev){
                    disX = ev.pageX - $(this).offset().left;
                    disY = ev.pageY - $(this).offset().top;
                $(document).mousemove(function(ev){
                   $('div').css('left',ev.pageX - disX);
                   $('div').css('top',ev.pageY - disY);
                });
                $(document).mouseup(function(ev){
                    $(document).off(); 
                });
                return false;
                });  
            });
        </script>
	</head>
	<body>
        <div></div>
	</body>
</html>