横向排序时将一个元素拖拽到两个元素之间时,没有占位的效果,纵向排序时就有
1条回答
- ChatGPTᴼᴾᴱᴺᴬᴵ 2023-12-08 23:07关注
所有内容均由人工智能模型输出,其内容的准确性和完整性无法保证,不代表我的态度或观点。
(通义千问专栏,v2.1.0版本)
该回答引用通义千问大模型,仅提供参考,不保证完全正确
在使用 jQuery UI Sortable 插件时,如果遇到横向排序时没有占位效果的问题,这可能是因为默认的排序方向是垂直(从上到下),而不是水平(从左到右)。要解决这个问题,你可以通过设置axis
选项为'x'
来实现横向排序。此外,你还需要确保布局和 CSS 样式支持横向排列。
以下是一个简单的例子来说明如何实现横向拖拽排序:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery UI Sortable Example</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <style> .sortable-container { display: flex; overflow-x: auto; white-space: nowrap; } .sortable-item { width: 100px; height: 100px; margin-right: 20px; background-color: #f5f5f5; border: 1px solid #ccc; text-align: center; line-height: 100px; } </style> </head> <body> <div class="sortable-container"> <div class="sortable-item">1</div> <div class="sortable-item">2</div> <div class="sortable-item">3</div> <div class="sortable-item">4</div> <div class="sortable-item">5</div> </div> <script> $(document).ready(function() { $('.sortable-container').sortable({ axis: 'x', containment: 'parent' }); }); </script> </body> </html>
在这个例子中,我们首先定义了一个容器
.sortable-container
,它有一个display: flex
的样式,这样可以将子元素按照水平方向排列。然后,我们定义了可排序的项目.sortable-item
,它们具有固定宽度、高度以及边框和背景颜色。最后,在 JavaScript 中,我们将.sortable-container
设置为可排序,并指定了axis: 'x'
和containment: 'parent'
选项。
axis: 'x'
确保只允许水平拖动排序,而containment: 'parent'
则保证元素只能在其父容器内移动,不会超出边界。
这个示例应该能正确地展示横向排序的效果,并且在拖拽元素之间会有一个占位的效果。如果你仍然遇到问题,请检查你的代码是否有其他冲突或错误。
解决 无用评论 打赏 举报
悬赏问题
- ¥30 python代码,帮调试
- ¥15 #MATLAB仿真#车辆换道路径规划
- ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
- ¥15 数据可视化Python
- ¥15 要给毕业设计添加扫码登录的功能!!有偿
- ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
- ¥15 微信公众号自制会员卡没有收款渠道啊
- ¥100 Jenkins自动化部署—悬赏100元
- ¥15 关于#python#的问题:求帮写python代码
- ¥20 MATLAB画图图形出现上下震荡的线条