欧阳筱苒 2019-08-19 09:55 采纳率: 50%
浏览 283

gridster的拖拽功能,将模块拖拽到屏幕最右侧以后,忽然消失

题目描述
网站需求类似于一个windows桌面,可以拖拽模块,可以拖拽改变位置,可以拖拽换页

    在gridster.js找到 autoscroll设置为false,这个问题就解决啦
  • 写回答

1条回答 默认 最新

  • 自在猫先生 2023-06-21 17:44
    关注

    源于chatGPT仅供参考

    以下是一个使用Gridster实现拖拽、改变位置和换页功能的示例代码:
    
    ```html
    <!DOCTYPE html>
    <html>
    <head>
      <title>Gridster Demo</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridster.js/0.13.0/css/jquery.gridster.min.css">
    </head>
    <body>
      <div class="gridster">
        <ul>
          <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">模块1</li>
          <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">模块2</li>
          <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">模块3</li>
          <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">模块4</li>
        </ul>
      </div>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gridster.js/0.13.0/jquery.gridster.min.js"></script>
      <script>
        $(function() {
          $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            autogrow_cols: true,
            resize: {
              enabled: true
            },
            draggable: {
              handle: '.gridster li'
            }
          });
        });
      </script>
    </body>
    </html>
    

    上述代码创建了一个基本的Gridster布局,其中包含四个模块。您可以根据需要添加更多的模块。

    在这个示例中,我们使用了jquery.gridster.min.cssjquery.gridster.min.js来加载Gridster库。然后,在$(function() {})中初始化Gridster,并设置一些配置选项,如模块的尺寸、边距、可调整大小和可拖拽等。

    要实现换页功能,您可以结合其他库或自定义逻辑来控制页面之间的切换。例如,使用按钮或滑动手势触发换页操作,然后使用Gridster的API方法来重新加载新页的模块。

    根据您的具体需求,您可能需要进一步定制和修改代码。但是,上述示例应该为您提供一个基础的起点,以实现类似于Windows桌面的拖拽、改变位置和换页功能。

    希望这个示例能够帮助您开始实现所需的功能。如果您有任何进一步的问题,请随时提问。

    ```

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名