欧阳筱苒 2019-08-19 01:55 采纳率: 66.7%
浏览 285

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

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

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

1条回答 默认 最新

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

    源于chatGPT仅供参考

    1. 以下是一个使用Gridster实现拖拽、改变位置和换页功能的示例代码:
    2. ```html
    3. <!DOCTYPE html>
    4. <html>
    5. <head>
    6. <title>Gridster Demo</title>
    7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridster.js/0.13.0/css/jquery.gridster.min.css">
    8. </head>
    9. <body>
    10. <div class="gridster">
    11. <ul>
    12. <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">模块1</li>
    13. <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">模块2</li>
    14. <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">模块3</li>
    15. <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">模块4</li>
    16. </ul>
    17. </div>
    18. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    19. <script src="https://cdnjs.cloudflare.com/ajax/libs/gridster.js/0.13.0/jquery.gridster.min.js"></script>
    20. <script>
    21. $(function() {
    22. $(".gridster ul").gridster({
    23. widget_base_dimensions: [100, 100],
    24. widget_margins: [5, 5],
    25. autogrow_cols: true,
    26. resize: {
    27. enabled: true
    28. },
    29. draggable: {
    30. handle: '.gridster li'
    31. }
    32. });
    33. });
    34. </script>
    35. </body>
    36. </html>

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

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

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

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

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

    ```

    展开全部

    评论
    编辑
    预览

    报告相同问题?

    悬赏问题

    • ¥15 给我一个openharmony跑通webrtc实现视频会议的简单demo项目,sdk为12
    • ¥15 vb6.0使用jmail接收smtp邮件并另存附件到D盘
    • ¥30 vb net 使用 sendMessage 如何输入鼠标坐标
    • ¥15 关于freesurfer使用freeview可视化的问题
    • ¥100 谁能在荣耀自带系统MagicOS版本下,隐藏手机桌面图标?
    • ¥15 求SC-LIWC词典!
    • ¥20 有关esp8266连接阿里云
    • ¥15 C# 调用Bartender打印机打印
    • ¥15 我这个代码哪里有问题 acm 平台上显示错误 90%,我自己运行好像没什么问题
    • ¥50 C#编程中使用printDocument类实现文字排版打印问题
    手机看
    程序员都在用的中文IT技术交流社区

    程序员都在用的中文IT技术交流社区

    专业的中文 IT 技术社区,与千万技术人共成长

    专业的中文 IT 技术社区,与千万技术人共成长

    关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

    关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

    客服 返回
    顶部