Question

我正在使用自举模式并且我使用了可排序+可拖动的插件，结果看起来很好，但是当我水平拖动div时会出现一个白色区域和一个水平滚动条，我＆＃ 39;已经在css中使用overflow-x: hidden;删除了滚动条。如何禁用水平拖动？

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

您可以使用可排序的<script src="{{URL::asset('../assets/js/jquery.js')}}"></script>选项来约束轴上的可拖动运动。

如果已定义，则只能水平或垂直拖动项目。可能的值：＆＃34; x＆＃34;，＆＃34; y＆＃34;。

参考：http://api.jqueryui.com/sortable/#option-axis

代码：

axis

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

如何在bootstrap模态

1 个答案: