jquery实现div的拖拽效果

最新推荐文章于 2024-05-09 10:41:45 发布

alisaLearn

最新推荐文章于 2024-05-09 10:41:45 发布

阅读量452

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/alisalearn/article/details/52774795

版权

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何利用jQuery实现div元素的拖放功能。通过监听鼠标事件，更新div的位置，使得用户可以轻松地在页面上移动div。教程涵盖了基本的jQuery语法和拖放交互逻辑，为网页增添更多互动体验。

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
    .drag{ position:absolute;
        background:#0000CC; 
        padding:0; 
    } 
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    $(document).ready(function(){
            $('.drag').mousedown(function (){
            var patch=parseInt($(this).css("height"))/2; //鼠标相对目标元素的位置
            $(document).mousemove(function (event){
            var ox=event.clientX;
            var oy=event.clientY;
            var t=oy-patch;
            var l=ox-patch;
            var w=$(window).width()-$('.drag').width();
            var h=$(window).height()-$('.drag').height();
            if(t<0){
                t=0;
                }
            else if(t>h){
                t=h;
                }  
             if(l<0){
                 l=0;
                 }
             else if(l>w){
                  l=w;      
                 }
            $('.drag').css({top:t,left:l})
            })
            });
            $(document).mouseup(function (){
            $(this).unbind("mousemove");
            }); 
});
    </script>
</head>

<body>
    <div class="drag">
        123
    </div>
</body>

</html>