jquery - 如何在 Bootstrap 模式中禁用水平拖动

Question

我正在开发一个 Bootstrap 模式，我使用了一个可排序+可拖动的插件，结果看起来不错，但是当我水平拖动 div 时，会出现一个白色区域和一个水平滚动条，我已经通过在 css 中使用 overflow-x: hidden; 删除了滚动条。我现在如何禁用水平拖动？

有 screenchot

javascript、css、html代码如下:

$(document.body).on('click','#sssort',function(){
            $('#sortable').sortable(); 
            $('#sortable').disableSelection(); 
        });

    #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background-color: #DDD；}
    #sortable li span { position: absolute; margin-left: -1.3em; }
    .modal_footer{padding:15px;}
    .modal-body{
        height: 800px;
        overflow: auto;
        overflow-x: hidden;
    }

<div id="mymodal_sort" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mymodal_sort" aria-hidden="true">
    <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <ul id="sortable">
                <div class="listItem" id="item1" style="background: #E0EEFD;height:60px;line-height: 60px;overflow: hidden; ">        
                    <div class="col-xs-2">
                            <p>时间1111111110</p>            
                    </div>
                    <div class="col-xs-2">
                            title
                    </div>
                    <div class="col-xs-2">
                            图片
                    </div>
                    <div class="col-xs-2">
                            链接
                    </div>
                    <div class="col-xs-2">
                            位置
                    </div>
                    <div class="col-xs-2">
                            发布者
                    </div>
                </div>
            </ul>
        </div>
        <div class="modal_footer">
            <button id="save_sort" type="button" class="btn btn-primary btn-sortable">提交</button>
            <button id="close" type="button" class="btn btn-default">取消</button>
        </div>
    </div>
</div>
</div>

Answer 1

您可以使用 sortable axis 选项来限制轴上的可拖动移动。

If defined, the items can be dragged only horizontally or vertically. Possible values: "x", "y".

引用:http://api.jqueryui.com/sortable/#option-axis

代码:

$('#sortable').sortable({ axis: "y"});

演示:https://jsfiddle.net/174ypddq/