王彬磊 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 用三极管设计—个共射极放大电路
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示