jquery - 插件 - 块结构拖拽更改

最新推荐文章于 2024-06-05 10:04:13 发布

風花_10969

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量151

点赞数 1

文章标签： jquery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="utf-8">
   <link href="../Content/bootstrap.min.css" rel="stylesheet">
</head>
<body>
   <div class="content">
      <div class="mediinfo-main main-y-scroll box-grey-bg">
         //编辑按钮
                <a class="btnpaixu" data-toggle="tooltip" data-placement="left" title="编辑系统位置"><span class="icon iconfont icon-bianjibi"></span></a>
         //内容区域
         <div class="index-main">
            <div class="index-content box-padding" id="container">
               <div class="columns queue">
                  <div class="item">
                     <div class="xt-name"><a href="#">学历情况统计</a></div>
                     <div class="xt-main">
                        <div id="xueliqk" style="width:auto; height: 180px;"></div>
                     </div>
                  </div>
                  <div class="item">
                     <div class="xt-name"><a href="#">专业技术职称情况统计</a></div>
                     <div class="xt-main">
                        <div id="zhuanyejszc" style="width:auto; height: 180px;"></div>
                     </div>
                  </div>
                  <div class="item">
                     <div class="xt-name"><a href="#">人员进出统计</a></div>
                     <div class="xt-main">
                        <div id="renyuanjc" style="width:auto; height: 180px;"></div>
                     </div>
                  </div>
                  <div class="item item-two">
                     <div class="xt-name"><a href="#">常用功能</a></div>
                     <div class="xt-main"></div>
                  </div>
                  <div class="item">
                     <div class="xt-name"><a href="#">教育资格档案</a></div>
                     <div class="xt-main"></div>
                  </div>
                  <div class="item item-two">
                     <div class="xt-name"><a href="#">提醒</a></div>
                     <div class="xt-main"></div>
                  </div>
                  
                  <div class="clear"></div>
               </div>
            </div>
         </div>
         //拖拽后保存按钮
         <div class="box box-btncase" style="display:none;">
            <div class="space-40"></div>
            <div class="btn-fixed btn-savepaixu">
               <div class="btn_right">
                  <div class="btn-group">
                     <button type="button" class="btn btn-primary btn-paixu" data-toggle="modal" data-target="#Modal-lingcun">保存排序</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
<script src="../Scripts/jquery-1.10.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/drag.js"></script>
<script>
$(function () {
    //tooltip
    $("[data-toggle='tooltip']").tooltip();
});
    //拖拽
    $("body").on("click", ".btnpaixu", function() {
        $(".box-btncase").show();
        $(".index-content>.columns>div").addClass("dragger");
        $(".index-content>.columns>div").find(".icon-jiantou").hide();
        $(".index-main").addClass("index-drag");
        registerDrag($('#container'));
    });
    $("body").on("click", ".btn-paixu", function() {
        $(this).parents(".box-btncase").hide();
        $(".index-content>.columns>div").removeClass("dragger");
        $(".index-content>.columns>div").find(".icon-jiantou").show();
        $(".index-main").removeClass("index-drag");
        unregisterDrag();
    });
</script>
</body>
</html>

/****** 首页拖拽区域 start  ******/
.clear {
    clear: both;
}
.index-main {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.columns>.item {
    display: block;
    background: #fff;
    font-size: 14px;
    text-shadow: none;
    border: 1px solid #eee;
    /*max-height: 160px;*/
    height: 220px;
    width: 32.333%;
    float: left;
    margin: 0.5%;
}
.columns>.item.item-two {
    width: 65.666%;
}
.index-drag .index-content .dragger {
    position: relative;
    border: 1px dotted #0288d1;
    background: #f1f7fa;
}
.index-drag .index-content .clear.dragger {
    border: none;
    background: none;
}
.item .xt-name {
    background: none;
    padding: 0 14px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #eee;
}
.item:hover .xt-name {
    background: #F0F9FF;
    border-color: #F0F9FF;
}
.item .xt-name a {
    font-size: 14px;
    color: #666;
}
.item .xt-main {
    padding: 0 14px;
    font-size: 12px;
}
.xt-select .form-control {
    border: none;
    box-shadow: none;
    background: none;
}
.xt-main-icon .icon {
    display: block;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: 6px;
    color: #fff;
}
.xt-main a{
    display: block;
    color: #666;
    font-size: 12px;
}
.xt-main a:hover {
    color: #0587db;
}
//排序按钮
.btnpaixu {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #0587db;
    z-index: 9;
}
.btnpaixu .icon {
    font-size: 18px;
    color: #fff;
}
//保存按钮
.btn-savepaixu.btn-fixed {
    background: none;
    padding-right: 54px;
    padding-bottom: 0;
}
.btn-savepaixu.btn-fixed .btn {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border: none;
}
/***** 首页拖拽区域 end *****/

風花_10969

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery - 插件 - 块结构拖拽更改

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <link href="../Content/bootstrap.min.css" rel="stylesheet"></head><body> <div...
复制链接

扫一扫