Sıralanabilir (sürükle ve bırak) yapmak istiyorum <ul> bir listesi var. Nasıl modern tarayıcılar ve dokunmatik cihazlarda Bootstrap 3 ile çalışmak için alabilirim?

Jqueryuı-sıralanabilir kullanmak http://touchpunch.furf.com/; iş gibi görünüyor, ama hacky ve jqueryuı Bootstrap ile güzel çalmıyor ile birlikte çalışıyorum.

Nasıl dokunmatik ekran desteği eklerken Bootstrap/jqueryuı çatışmaları önlemek miyim?

Sadece @KyorCode bir tamamlayıcı bir cevap sonrası aklıma gelmezdi. Onun tavsiyesine uydum ve JQuery Sortable ile gitti ve benim için sorunsuz çalıştı. Bana belki 10 dakika bu çalışma için aldı.

CSS - CSS ile ilgili sorunlar vardı hayır yani sadece JavaScript çakışan zaten Bootstrap ile herhangi bir JQuery UI dahil etmek zorunda değildim.

Örnek Çalışma:

İşte 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:

10 ** sayfanızda.

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