jquery 自定义插件拖拽

最新推荐文章于 2023-01-12 15:49:43 发布

tianmeng1999

最新推荐文章于 2023-01-12 15:49:43 发布

阅读量182

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_42448623/article/details/109230504

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- 
        1.给jquery对象本身扩展方法  $.xxx
        2.给jquery Dom对象扩展方法  $(div).xxx
     -->

    <div class="div1">fff</div>
    <div class="div2">fff</div>
    <div class="div3">fff</div>
    <script>
        // 1.给jquery对象本身扩展方法
        $.extend({
            lg(){
                console.log('扩展lg方法')
            }
        })
        // $.lg()


        // 2.给jquery Dom对象扩展方法
        $.fn.extend({
            domfun(){
                // $(this); 指向调用者 $(div)
                console.log('扩展domfun方法')
                return $(this)
            }
        })
        

        // 或者
        $.fn.domfun2 = function(){
            // $(this); 指向调用者 $(div)
            console.log('扩展domfun方法')
            return $(this)
        }
        // $(div).domfun().domfun2


        $.fn.dragGable = function(options={}){
            const defaultObj = {
                limit: false,
            }
            Object.assign(defaultObj, options)

            const {limit} = defaultObj
            const dom = $(this)

            // 修改元素定位
            dom.css({
                position:'absolute',
                top:0,
                left:0,
                cursor: 'move'
            })

            dom.mousedown(function(e){
                let startX = e.pageX -  dom.offset().left
                let startY = e.pageY -  dom.offset().top

                $(document).mousemove(function(ed){
                    let moveX = ed.pageX - startX
                    let moveY = ed.pageY - startY

                    // 边界限制
                    if(limit){
                        let rightBorder =  $(this).innerWidth() - dom.outerWidth()
                        let bottomBorder =  $(this).innerHeight() - dom.outerHeight()
                        moveX = moveX <= 0 ? 0 : moveX
                        moveX = moveX >= rightBorder ? rightBorder : moveX
                        moveY = moveY <= 0 ? 0 : moveY
                        moveY = moveY >= bottomBorder ? bottomBorder : moveY
                    }
                    dom.css({
                        left: moveX,
                        top: moveY
                    })
                })

                $(document).mouseup(function(){
                    $(this).off()
                })

                return false
            })
        }

        $('.div1').dragGable({
            limit: true, // 是否限制范围
        })

        $('.div2').dragGable()
        $('.div3').dragGable()
    </script>
</body>
</html>

tianmeng1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 自定义插件拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/
复制链接

扫一扫