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

代码语言:html

所属分类:拖放

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

代码标签: 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;
      }
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0