• jquery实现很简单的DIV拖动


    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下:

    在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:
                    var x = event.clientX - (document.documentElement.clientWidth - 620) / 2 - event.offsetX;
                    var y = event.clientY - (document.documentElement.clientHeight - 465) / 2 - event.offsetY;
                    $(".pdivt .divnei").css("left", x);
                    $(".pdivt .divnei").css("top", y);

    event.offsetX   eventoffsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

    event.clientX  获取鼠标的水平位置

    event.clientY  获取鼠标的垂直位置

    ousedown事件在鼠标在元素上点击后会触发mousemove 事件通过鼠标在元素上移动来触发mouseout事件在鼠标从元素上离开后会触发<style>
        #Drigging
        {
            200px;
            background:#CCC;
            border:solid 1px #666;
            height:80px;
            line-height:80px;
            text-align:center;
            position:absolute;
        }
    </style>
    <script src="../js/jquery-1.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
    var bool=false;
    var offsetX=0;
    var offsetY=0;
            $("#Drigging").mousedown(function(){
                bool=true;
                 offsetX = event.offsetX;
                offsetY = event.offsetY;
                $(this).css('cursor','move');
                                            })
            .mouseup(function(){
                bool=false;
                              })
            $(document).mousemove(function(e){
    if(!bool)
    return;
    var x = event.clientX-offsetX;
    var y = event.clientY-offsetY;
                $("#Drigging").css("left", x);
                $("#Drigging").css("top", y);

                                           })
                   })
    </script> offsetParent:http://www.cnblogs.com/jilleanwong/archive/2008/09/21/1295415.htmloffsetLeft、offsetTop、offsetWidth、offsetHeight属性http://www.cnblogs.com/jilleanwong/archive/2008/09/22/1295783.html 

  • 相关阅读:
    算法问题实战策略 题解
    算法杂题题解 合集
    算法问题实战策略 ASYMTILING
    Leetcode 139. 单词拆分 dp
    算法问题实战策略 FESTIVAL 摇滚音乐节
    PAT 甲级题解
    《挑战程序设计竞赛1》题解合集
    (七)React Ant Design Pro + .Net5 WebApi:后端环境搭建日志、异常处理
    nginx 超时
    (九)React Ant Design Pro + .Net5 WebApi:后端环境搭建IdentityServer4(一)简单配置
  • 原文地址:https://www.cnblogs.com/zhoulove/p/3599430.html
Copyright © 2020-2023  润新知