题目描述
网站需求类似于一个windows桌面，可以拖拽模块，可以拖拽改变位置，可以拖拽换页
在gridster.js找到 autoscroll设置为false，这个问题就解决啦
gridster的拖拽功能，将模块拖拽到屏幕最右侧以后，忽然消失
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
1条回答 默认 最新
自在猫先生 2023-06-21 09: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桌面的拖拽、改变位置和换页功能。
希望这个示例能够帮助您开始实现所需的功能。如果您有任何进一步的问题，请随时提问。
```
解决 无用评论 打赏举报 分享
编辑
预览
- 京ICP备19004658号
- 经营性网站备案信息
公安备案号11010502030143- 营业执照
- 北京互联网违法和不良信息举报中心
- 家长监护
- 中国互联网举报中心
- 网络110报警服务
- Chrome商店下载
- 账号管理规范
- 版权与免责声明
- 版权申诉
- 出版物许可证
- ©1999-2025北京创新乐知网络技术有限公司
