zoukankan      html  css  js  c++  java
  • js在一个div里面移动其子div

            var ChildDiv = $("#cid");
                var width = 0;  //鼠标点击子div的地方和子div的左边边距距离
                var height = 0;  //鼠标点击子div的地方和子div的上边边距距离
                ChildDiv.onmousedown = function (ev) //鼠标按下DIV
                {
                    var ChildDivEvent = ev || event;   //捕获点击的对象
                    width = ChildDivEvent.clientX - ChildDiv.offsetLeft;
                    height = ChildDivEvent.clientY - ChildDiv.offsetTop;
                    document.onmousemove = function (ev)   //鼠标移动
                    {
                        var ChildDivEvent = ev || event;
                        var x = ChildDivEvent.clientX - width;
                        var y = ChildDivEvent.clientY - height;
                        if (x < 0) //当DIV的Left小于0,也就是移出左边
                        {
                            x = 0; //就把DIV的Left设置为0,就不能移出左边
                        } else if (x > $("#pid").width() - ChildDiv.offsetWidth) //DIV不能移出父DIV的右边
                        {
                            x = $("#pid").width() - ChildDiv.offsetWidth;
                        }
                        if (y < 0) //上边
                        {
                            y = 0;
                        } else if (y > $("#pid").height() - ChildDiv.offsetHeight) //下边
                        {
                            y = $("#pid").height() - ChildDiv.offsetHeight;
                        }
                        ChildDiv.style.left = x + 'px'; //DIV的Left设置为新鼠标X坐标减去width的值
                        ChildDiv.style.top = y + 'px'; //DIV的Top设置为新鼠标Y坐标减去height的值
                    };
                    document.onmouseup = function () //鼠标松开时
                    {
                        document.onmousemove = null; //把鼠标移动清除
                        document.onmouseup = null; //把鼠标松开清除
                    };
                    return false;
                };
  • 相关阅读:
    如何使用angularjs实现文本框设置值
    如何使用angularjs实现文本框获取焦点
    electron的安装
    linux中升级jdk的方法
    linux中添加开机自启服务的方法
    liunx系统安装tomcat的方法
    liunx系统安装jdk的方法
    常用linux命令
    ResourceBundle的使用
    查看Linux系统版本的命令
  • 原文地址:https://www.cnblogs.com/zhylioooo/p/8257786.html
Copyright © 2011-2022 走看看