Question

我尝试了可排序js中的演示，在该演示中，我需要显示一张纸牌的水平列表，中间有箭头。该列表将水平滚动。

以下是相同代码：

<html>

<head>


<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>


  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

<style type="text/css">
.ui-draggable-dragging{
height: 250px; 
width: 250px;
background: yellow;
}

#sortable1{
height:300px;
width: auto;
}
#sortable1 > div{
float: left;

}
.card{
    height:250px;
    width:250px;
    padding: 10px 25px;
    flex: 0 0 auto;
}
.highlight{
background:yellow;
}
.ignore-elements.highlight{
background: white !important;}

.row{

    display: flex;
    flex-wrap: nowrap;
   overflow-x: auto;}
</style>

</head>
<body>
    <main role="main">
        <div class="container">
            <div class="row gridDemo m-2 p-4"  id="gridDemo1">

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 0</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 1</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 2</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 3</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 4</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 5</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 6</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 7</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 8</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>

                <div class="card" >
                    <div class="card-body">
                    <div class="card-title"> My Card 9</div>
                    </div>
                </div>
                <div class=" ignore-elements d-flex align-items-center pl-3 pr-3" >
                    <i class="fas fa-chevron-circle-right"></i>
                </div>


                </div>





        </div>
        <!-- /container -->

    </main>
    <script type="text/javascript">
        $(document).ready(function() {

            var     gridDemo = document.getElementById('gridDemo1');

            new Sortable(gridDemo, {
                draggable: ".card",  // Specifies which items inside the element should be draggable
                direction: 'horizontal', // Direction of Sortable (will be detected automatically if not given)
                forceFallback: true,
                  scroll: true,
                  bubbleScroll: true,
                  scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
                    scrollSpeed: 100, 
                animation: 400,
                ghostClass: 'blue-background-class',
                filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)

                swap: true, // Enable swap plugin
                swapClass: 'highlight', // The class applied to the hovered swap item
                onSort: function (/**Event*/evt) {
                    // same properties as onEnd
                    console.log(evt)
                }
            });
        });
    </script>
</body>
</html>

可拖动的卡仍然可以垂直拖动。我如何防止卡垂直拖动。我只需要水平拖动。

可排序的JS交换：水平方向无效

0 个答案: