zoukankan      html  css  js  c++  java
  • jQuery拖拽原理实例

    HTML源代码

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>拖拽实例</title>
    <link rel="stylesheet" href="drag.css">
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="drag.js"></script>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    CSS源代码

    *{
        margin: 0;
        padding:0;
    }
    
    div{
        width: 100px;
        height: 100px;
        background: #f00;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
    }

    JS源代码 

    $(function(){
        $('div').mousedown(function(e){
    
            //offset()在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档
            var positionDiv = $(this).offset();
            var distenceX = e.pageX - positionDiv.left;
            var distenceY = e.pageY - positionDiv.top;
            // alert(positionDiv.left);
    
            $(document).mousemove(function(e) {
            var x = e.pageX - distenceX;
            var y = e.pageY - distenceY;
            //防止将元素拖拽出浏览器窗口
            if(x<0){
                x=0;
            }else if(x>$(document).width()-$('div').outerWidth(true)){
                x=$(document).width()-$('div').outerWidth(true);
            }
            if(y<0){
                y=0
            }else if(y>$(document).height()-$('div').outerHeight(true)){
                y=$(document).height()-$('div').outerHeight(true);
            }
            $('div').css({
                'left':x+'px',
                'top':y+'px'
            });
        });
        $(document).mouseup(function() {
            //unbind和off都可以解除绑定时间
            $(document).unbind('mousemove');
        });
        });
    });
  • 相关阅读:
    博客写作技巧及规范
    2020年中总结
    运维笔记(一)——磁盘挂载与逻辑卷扩容
    mysql设计与优化(二)——配置主从
    mysql设计与优化(一)
    日志处理(一)
    坑爹问题—360自动填充账户密码
    mysql设计与优化
    java并发-ConcurrentMap
    FastDfs配置nginx
  • 原文地址:https://www.cnblogs.com/littlefly/p/3677509.html
Copyright © 2011-2022 走看看