zoukankan      html  css  js  c++  java
  • 拖拽文字辅助线对齐

    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>拖拽文字辅助线对齐</title>
        <link rel="stylesheet" type="/socialorg/image/css/jquery-ui.min.css">
        <script type="text/javascript" src="/socialorg/image/move_img.js"></script>
        <script type="text/javascript" src="/highcharts/jquery.min.js"></script>
        <script type="text/javascript" src="/socialorg/image/js/jquery-ui.min.js"></script>
        <style type="text/css">
            #aaa {
                position: fixed;
                background-color: blue;
                height: 150px;
                 150px;
            }
    
            #bbb {
                position: fixed;
                background-color: green;
                height: 150px;
                 150px;
                top: 200px;
                left: 400px;
            }
    
            #mm, #nn {
                position: absolute;
                display: none;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                var hh = $(document).height(); //获取页面容器的高度;
                //alert(hh);
                $('#aaa').draggable({
                    drag: function (event, ui) {
                        var x = ui.offset.left;
                        var y = ui.offset.top;
                        $('#mm').css("top", y);
                        $('#nn').css("height", hh);
                        $('#nn').css("left", x);
                        $('#mm').css("display", "block");
                        $('#nn').css("display", "block");
                    },
    
                    stop: function (event, ui) {
                        $('#mm').css("display", "none");
                        $('#nn').css("display", "none");
                    }
    
                })
    
            })
        </script>
    </head>
    
    <body>
    <div id="mm"
         style="border-color: red; border-bottom-style: dashed;  100%; border-bottom- 1px;"></div>
    <div id="nn"
         style="border-color: red; border-left-style: dashed;  1px; border-left- 1px;"></div>
    <div id="aaa">
    
        Drag me around
    
    
    </div>
    
    <div id="bbb">
    
        align me around
    
    
    </div>
    </body>
    </html>
  • 相关阅读:
    超图 wpf地图控件加载地图
    MySql常用内容
    超图资料下载与环境安装
    超图SampleCode运行须知
    英语感叹词
    英语之妻子,老婆
    Pycharm设置
    yizhihx ubuntu config
    Ubuntu之网易云音乐无法启动
    linux之错误输出重定向
  • 原文地址:https://www.cnblogs.com/chendezhen/p/15292810.html
Copyright © 2011-2022 走看看