如何为 Bootstrap 实现支持拖放的触摸敏感、响应式、可排序列表?

Posted

技术标签:

【中文标题】如何为 Bootstrap 实现支持拖放的触摸敏感、响应式、可排序列表?【英文标题】:How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap? 【发布时间】:2013-12-23 20:07:21 【问题描述】:

我有一个<ul> 列表,我想使其可排序(拖放)。如何让它在现代浏览器和触摸设备中与 Bootstrap 3 一起使用?

我正在尝试将 jqueryui-sortable 与 http://touchpunch.furf.com/ 结合使用;它似乎可以工作,但它很hacky,而且jQueryUI 不能很好地与Bootstrap 配合使用。

如何在添加触摸屏支持时避免 Bootstrap/jQueryUI 冲突?

【问题讨论】:

***.com/questions/11177735/… 这个基于 gridster,link - 初始版本用于仪表板,但您可能可以让它用于常规列表 【参考方案1】:

只是想我会发布一个来自@KyorCode 的补充答案。我听从了他的建议并选择了JQuery Sortable,它对我来说无缝地工作了。我大概花了 10 分钟来完成这项工作。

我不必包含任何 JQuery UI CSS - 只是 javascript - 所以 CSS 与 Bootstrap 冲突没有任何问题。

工作示例:

这是 www.bootply.com 上的working example。

HTML:

<!-- Bootstrap 3 panel list. -->
<ul id="draggablePanelList" class="list-unstyled">
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel.</div>
        <div class="panel-body">Content ...</div>
    </li>
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel too.</div>
        <div class="panel-body">Content ...</div>
    </li>
</ul>

JavaScript:

您可以在您的页面中download JQuery Sortable without including the whole of JQuery UI。

<!-- Assumes that JQuery is already included somewhere. Size: 22kb or 13kb minified. -->
<script src="/Scripts/jquery-ui-1.10.4.custom.js"></script>

<script type="text/javascript">
    jQuery(function($) 
        var panelList = $('#draggablePanelList');

        panelList.sortable(
            // Only make the .panel-heading child elements support dragging.
            // Omit this to make the entire <li>...</li> draggable.
            handle: '.panel-heading', 
            update: function() 
                $('.panel', panelList).each(function(index, elem) 
                     var $listItem = $(elem),
                         newIndex = $listItem.index();

                     // Persist the new indices.
                );
            
        );
    );
</script>

CSS:

<style type="text/css">
    /* show the move cursor as the user moves the mouse over the panel header.*/
    #draggablePanelList .panel-heading 
        cursor: move;
    
</style>

HTH

【讨论】:

@light24bulbs - 刚刚在我的 iPad 上进行了测试,但它不起作用,也许是设计使然......老实说,我不喜欢拖放的想法在触摸设备上,因为很难(不可能?)区分滚动动作和拖动动作。我使用 JIRA 进行错误跟踪,我对他们的界面的抱怨之一是,当我尝试在 iPad 上滚动时,我总是不小心更改问题优先级,因为它允许将问题拖到优先级顺序中。这是桌面上的一项很棒的功能,但更好的触摸方法是在每一行上使用胖手指大小的向上/向下箭头。 @Acentric 为什么不使用handle 和/或delay 来区分滚动和拖动操作? @speendo - 我在示例中使用句柄。有一个关于the UX concerns of drag-and-drop on touch devices 的简短讨论——但本质上它与滚动手势冲突,并且许多设备现在使用长按作为右键单击——因此延迟可能与此冲突。 @Acentric 很公平。 一个小警告——你可能会遇到一些同时运行 jQuery UI 和 Bootstrap 的命名空间冲突。您可以通过执行自定义 jQuery UI 导出并仅包含您需要的功能(如这里的情况),或使用 jQuery 的“桥”功能重命名与 Bootstrap 功能重复的 jQuery UI 功能,例如“工具提示”来缓解这种情况' 和 ' 按钮。请参阅***.com/questions/13731400/… 了解更多信息。【参考方案2】:

在此之前发布的答案令人惊讶地过时了。

rubaxa-sortable 是一个快速、无依赖、可重新排序的小型列表小部件,支持触控,可与 html5 原生拖放 API 配合使用。你可以将它与 Bootstrap、Foundation 或任何你想要的 CSS 库一起使用,并且实例化它只需要一行。

它支持在列表内或跨列表重新排序。您可以定义只能接收元素的列表,或者您可以从中拖动但不能拖放到其上的列表。它也得到了非常积极的维护和MIT licensed on GitHub。

new Sortable(document.getElementsByClassName('sortable')[0]);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Sortable -->
<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.js"></script>

<ul class="list-group sortable">
  <li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
  <li class="list-group-item">It works with Bootstrap...</li>
  <li class="list-group-item">...out of the box.</li>
  <li class="list-group-item">It has support for touch devices.</li>
  <li class="list-group-item">Just drag some elements around.</li>
</ul>

【讨论】:

@FezVrasta:你是制作Material Bootstrap Design的Fez Vrasta吗? 是的,我是开发者 @FezVrasta 很棒的工具!

以上是关于如何为 Bootstrap 实现支持拖放的触摸敏感、响应式、可排序列表?的主要内容,如果未能解决你的问题,请参考以下文章

在 PyQt 中支持拖放的 QTreeView

react.js 的触摸支持拖放

iPhone/iOS:如何为 Scrollview 的子视图实现拖放?

使用 %1 进行拖放的批处理文件复制

HTML 5 拖放相对于 jQuery UI 拖放的优势

如何为可移动的浮动按钮设置 onTouch 和 onClick 功能