王彬磊 2014-04-13 14:15 采纳率: 0%
浏览 1163

jquery ui sortable横向排序问题

横向排序时将一个元素拖拽到两个元素之间时，没有占位的效果，纵向排序时就有

  • 写回答

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' 则保证元素只能在其父容器内移动，不会超出边界。

    这个示例应该能正确地展示横向排序的效果，并且在拖拽元素之间会有一个占位的效果。如果你仍然遇到问题，请检查你的代码是否有其他冲突或错误。

    评论

报告相同问题？

悬赏问题

  • ¥15 求解 yolo算法问题
  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝