web-dev-qa-db-ja.com

Bootstrapのドラッグアンドドロップをサポートするタッチセンシティブ、レスポンシブ、ソート可能なリストを実装するにはどうすればよいですか？

ソート可能な（ドラッグ＆ドロップ）したい<ul>リストがあります。最新のブラウザとタッチデバイスでBootstrap 3で動作させるにはどうすればよいですか？

http://touchpunch.furf.com/ ;と組み合わせてjqueryui-sortableを使用しようとしています。動作しているように見えますが、ハックであり、jQueryUIはBootstrapでNiceを再生しません。

タッチスクリーンサポートの追加中にBootstrap/jQueryUIの競合を回避するにはどうすればよいですか？

twitter-bootstrapjquery-uitouchjquery-ui-sortable
47
brk

これの前に投稿された回答は驚くほど時代遅れです。

rubaxa-sortable は、HTML5ネイティブドラッグアンドドロップAPIで動作する、タッチをサポートする高速で依存関係のない小さな並べ替え可能なリストウィジェットです。 Bootstrap、Foundation、または必要なCSSライブラリで使用でき、インスタンス化には1行しかかかりません。

リスト内またはリスト全体の並べ替えをサポートします。要素のみを受け取ることができるリスト、またはドラッグはできるがドロップできないリストは定義できます。また、非常に積極的に保守されており、 MITは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>
73
Dan Dascalescu

@KyorCodeからの補足的な回答を投稿すると思いました。私は彼のアドバイスに従い、 JQuery Sortable を使用しましたが、それはシームレスに機能しました。これを機能させるには、おそらく10分かかりました。

JQuery UI CSS（JavaScriptのみ）を含める必要はなかったので、とにかくBootstrapと競合するCSSの問題はありませんでした。

動作例：

これは、www.bootply.comの 作業例 です。

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：

JQuery UI全体を含めずにJQuery Sortableをダウンロード ページにできます。

<!-- 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

44
sheikhjabootie