Fatal编程技术网
  • javascript/
  • Javascript 可排序JS交换：水平方向不工作

Javascript 可排序JS交换：水平方向不工作

javascript

Javascript 可排序JS交换：水平方向不工作,javascript,sortablejs,Javascript,Sortablejs,我在sortable js中尝试了一个演示，在这个演示中，我需要显示一个带有箭头的水平卡片列表。此列表将水平滚动 下面是相同的代码： <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5

我在sortable 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>


.ui可拖动的拖动{
高度：250px；
宽度：250px；
背景：黄色；
}
#可排序1{
高度：300px；
宽度：自动；
}
#分类表1>div{
浮动：左；
}
.卡片{
高度：250px；
宽度：250px；
填充：10px 25px；
flex:0自动；
}
.亮点{
背景：黄色；
}
.ignore-elements.highlight{
背景：白色！重要；}
.行{
显示器：flex；
柔性包装：nowrap；
溢出-x:auto；}
我的卡0
我的名片1
我的名片2
我的名片3
我的名片4
我的名片5
我的名片6
我的名片7
我的名片8
我的名片9
$（文档）.ready（函数（）{
var gridDemo=document.getElementById（'gridDemo1'）；
新的可排序（gridDemo{
可拖动：“.card”，//指定元素中哪些项应可拖动
方向：'水平'，//可排序的方向（如果未给出，将自动检测）
武力撤退：没错，
卷轴：没错，
没错，
scrollSensitivity:30，//px，鼠标离开始滚动的边缘必须有多近。
滚动速度：100，
动画：400，
ghostClass:“蓝色背景类”，
过滤器：“.ignore elements”，//不会导致拖动的选择器（字符串或函数）
swap:true，//启用交换插件
swapClass:'highlight'，//应用于悬停交换项的类
onSort:函数（/**事件*/evt）{
//与ONED具有相同的属性
控制台日志（evt）
}
});
});
可拖动卡仍然可以垂直拖动。如何防止卡垂直拖动。我只需要水平拖动。

目前，如果没有自定义代码，您无法执行此操作。如果要尝试使用自定义代码执行此操作，请使用可排序的事件提供并使用
Sortable.ghost
访问ghost元素。另外，在选项中设置
forceFallback:true
。目前，没有自定义代码，您无法执行此操作。如果要尝试使用自定义代码执行此操作，请使用可排序的事件提供并使用
Sortable.ghost
访问ghost元素。另外，在选项中设置
forceFallback:true
。