twitter bootstrap - thumbnail - ¿Cómo puedo implementar una lista adaptable sensible al tacto que permita arrastrar y soltar para Bootstrap?

video responsive bootstrap 4

Question

Tengo una lista <ul> que quiero hacer ordenar (arrastrar y soltar). ¿Cómo puedo hacer que funcione con Bootstrap 3 en navegadores modernos y dispositivos táctiles?

Estoy tratando de usar jqueryui-sortable combinado con http://touchpunch.furf.com/ ; parece funcionar, pero es chiflado y jQueryUI no juega bien con Bootstrap.

¿Cómo puedo evitar conflictos Bootstrap / jQueryUI al agregar compatibilidad con pantalla táctil?

Answer 1

Las respuestas publicadas antes de esta son sorprendentemente desactualizadas.

rubaxa-sortable es un widget rápido, sin dependencias, de listas pequeñas y reorientables con soporte táctil que funciona con la API nativa de arrastrar y soltar de HTML5. Puede usarlo con Bootstrap, Foundation o cualquier biblioteca de CSS que desee, e instaurarlo solo toma una línea.

Es compatible con el reordenamiento dentro de una lista o entre listas. Puede definir listas que solo pueden recibir elementos, o listas desde las cuales puede arrastrar, pero sobre las cuales no puede soltar. También se mantiene muy activamente y MIT tiene licencia en 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>

Answer 2

Solo pensé en publicar una respuesta complementaria a la de @KyorCode. Seguí su consejo y fui con JQuery Sortable y funcionó a la perfección para mí. Me tomó tal vez 10 minutos para que esto funcione.

No tuve que incluir ningún CSS de JQuery UI, solo el JavaScript, por lo que no hubo problemas con el CSS en conflicto de todos modos con Bootstrap.

Ejemplo de trabajo:

Aquí hay un ejemplo de trabajo en 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:

Puede descargar JQuery Sortable sin incluir toda la interfaz de usuario de JQuery en su página.

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