欧阳筱苒 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.css和jquery.gridster.min.js来加载Gridster库。然后，在$(function() {})中初始化Gridster，并设置一些配置选项，如模块的尺寸、边距、可调整大小和可拖拽等。

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

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

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

    ```

    评论

报告相同问题？

悬赏问题

  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）