gridstack实现仪表盘小部件可拖拽更换位置示例代码-html代码-BFW代码库

gridstack实现仪表盘小部件可拖拽更换位置示例代码

代码语言：html

所属分类：拖放

代码描述：gridstack实现仪表盘小部件可拖拽更换位置示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
   <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/gridstack.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gridstack-jq.js"></script>
<style>
     .grid-stack-item {
      border: 0;
    }
    .grid-stack-item-content {
      background-color: white;
      text-align: center;
    }
    h1 {
      text-align: center;
      font-size: 3rem;
      margin-top: 2rem;
      margin-bottom: 1.5rem;
    }
    .card {
      background: none;
    }
    section {
      padding: 0 15px 0 15px;
    }
    .grid-stack-item-removing {
      opacity: 0.8;
      filter: blur(5px);
    }
    @media all and (max-width: 575px) {
      #hero {
        margin-top: 32px;
      }
    }
    .logo {
      display: inline;
      margin-right: 15px;
    }
    #trash {
      background-color: #cc6857;
    }
    .newWidget > .grid-stack-item-content {
      background-color: #6cad84;
    }
</style>
</head>
<body>
    <main role="main" class="container-fluid" style="padding: 0">
    <section id="demo" class="bg-primary">
      <div class="row">
        <div class="col-lg-12 text-white">
          <ion-icon class="float-right" name="grid" style="font-size: 350%; margin-top: 10px"></ion-icon>
          <h1>基本演示</h1>
          <hr />
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12" style="padding-bottom: 25px;">
          <div style="padding: 15px; border: 1px solid white">
            <div class="grid-stack" id="simple-grid"></div>
          </div>
        </div>
      </div>
    </section>
 

    <section id="advancedDemo" class="bg-primary">
      <div class="row">
        <div class="col-lg-12 text-white">
          <ion-icon class="float-right" name="grid" style="font-size: 350%; margin-top: 10px"></ion-icon>
          <h1>高级演示</h1>
          <hr />
        </div>
      </div>
      <div class="row">
        <div class="col-md-2 d-none d-md-block" style="border-right: 1px dashed white;">
          <div id="trash" style="padding: 15px; margin-bottom: 15px;" class="text-center text-white">
            <div>
              <ion-icon name="trash" style="font-size: 400%"></ion-icon>
            </div>
            <div>
              <span>放在这里删除小部件！</span>
            </div>
          </div>
          <div class="text-center card text-white grid-stack-item newWidget">
            <div class="card-body grid-stack-item-content">
              <div>
                <ion-icon name="add-circle" style="font-.........完整代码请登录后点击上方下载按钮下载查看