zoukankan      html  css  js  c++  java
  • JQuery拖拽元素改变大小尺寸

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    html,
    body {
    height: 100%;
    100%;
    margin: 0;
    padding: 0;
    position: relative;
    }

    .con {
    display: flex;
    height: 100%;
    }

    .Parent-left {
    150px;
    border-right: 1px solid #000000;
    }

    .Parent-right {
    flex: 1;
    }

    .Parent-left,
    .Parent-right {
    height: 100%;
    }

    .ChildL,
    .ChildR {
    height: 100%;
    }

    .parLeCon,
    .parRiCon {
    height: 100%;
    99%;
    word-break: break-all;
    }

    .ChildL:hover {
    cursor: w-resize
    }

    .parLeCon:hover {
    cursor: auto
    }
    </style>
    </head>
    <body>
    <div class="con">
    <div class="Parent-left">
    <div class="ChildL">
    <div class="parLeCon">
    <p>asdasdasdasasdasdas</p>
    </div>
    </div>
    </div>
    <div class="Parent-right">
    <div class="ChildR">
    <div class="parRiCon">
    <p>asdasdasdasasdasdas</p>
    </div>
    </div>
    </div>
    </div>
    <script src="js/jquery.1.10.2.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(function() {
    var dragable = false //默认不能拖动
    var pageX = $(".ChildL").width() //鼠标拖动的宽度

    //鼠标按下事件
    $(".ChildL").bind('mousedown', function(e) {
    dragable = true
    //鼠标弹起事件
    $(document).bind('mouseup', function(e) {
    if (dragable) {
    dragable = false
    }
    })
    //鼠标在元素内部移到时不断触发事件
    $(document).bind('mousemove', function(e) {
    if (dragable) {
    pageX = e.pageX
    //设置宽度
    $(".Parent-left").width(pageX)
    }
    })
    //阻止默认事件
    e.preventDefault()
    })
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    集合异常原因与处理方式
    List的子类特点
    数据结构:数据的组织方式
    java对多态的了解
    JAVA电话本系统
    字符串转换数组
    登录用户名密码是否合法
    十三 spark 集群测试与基本命令
    十二 flume与kafka数据传输
    十一 spark- Standalone 集群
  • 原文地址:https://www.cnblogs.com/hprBlog/p/10637871.html
Copyright © 2011-2022 走看看