zoukankan      html  css  js  c++  java
  • 可以拖动的面板(Panels)

    html部分:
    <div class="col-sm-2 left_nav" id="float_fixed" >

    <div class="panel panel-primary console" id="fixedPosition">
    <div class="panel-heading" id="float_header" ondragstart="return false">
    <h3 class="panel-title text-center" ondragstart="return false">
    菜单栏
    </h3>
    </div>
    <div class="panel-body">
    <div class="panel-group " >
    <div class="panel panel-default">
    <div class="panel-heading ">
    <h4 class="panel-title ">
    <a data-toggle="collapse" data-parent="#accordion"
    href="#collapseOne">
    个人信息
    </a>
    </h4>
    </div>

    <div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
    <a id="resume">基本信息</a><hr>
    <a id="resume_xg">信息修改</a><hr>
    </div>
    </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion"
    href="#collapseTwo">
    用户管理
    </a>
    </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    <a id="user_student">学生</a><hr>

    <a id="user_teacher">老师</a><hr>

    <a id="super_admin">超级管理员</a>

    </div>
    </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion"
    id="new_user">
    新增用户
    </a>
    </h4>
    </div>

    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion"
    href="#collapseFour">
    课程信息管理
    </a>
    </h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
    <div class="panel-body">
    <a id="sd_college">水利水电学院</a><hr>
    <a id="jsj_college">计算机学院</a><hr>
    <a id="wl_college">物理工程学院</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    js部分:
    $("#float_fixed").css({
    "position":"fixed",
    "z-index":"40",
    "top":"30px",
    "left":"5px"
    });
    $("#float_header").css("cursor","pointer");
    $("#float_header").mousedown(fnFixedMOV);
    function fnFixedMOV(e){
    //$("#float_fixed").stop();
    $("#float_fixed").off("mouseleave");
    $("#float_header").off("mouseover");
    $(document).off("mousemove");
    //$(window).off("resize");
    var obj = {};
    var oCoord = $("#float_fixed").offset();
    obj.mouseX= e.pageX-oCoord.left;
    obj.mouseY = e.pageY-oCoord.top;
    $(document).on("mousemove",obj,function(event){
    var y = event.pageY-(event.data.mouseY+$(window).scrollTop());
    var x = event.pageX-event.data.mouseX;
    $("#float_fixed").css("top",y+"px");
    $("#float_fixed").css("left",x+"px");
    });//移动事件结束

    /*松开鼠标是的事件*/
    $(this).mouseup(fnFixedMouUP);

    }
    function fnFixedMouUP(event) {
    /* Act on the event */
    $("#float_fixed").off("mouseleave");
    $(document).off("mousemove");

    }


  • 相关阅读:
    configuring tortoise git and vs code.
    introcuding less css with less.js, using webcompiler ext
    CSS3 auto revolution practitioner!
    我与 美国作家 21天精通C++ 作者 Rao的对话:
    AngularJs Test demo &front end MVVM implementation conjecture and argue.
    GreenPlum完全安装_GP5.11.3完整安装
    hdfs文件写入kafka集群
    Greenplum主备节点切换
    Greenplum客户端访问控制
    Greenplum+mybatis问题解析
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6435207.html
Copyright © 2011-2022 走看看