HTML5 UL LI se pueden arrastrar

Question

tengo una lista desordenada:

• tarea de la Lista 1
• tarea de la Lista 2
• tarea de la Lista 3
• tarea de la Lista 4
• tarea de la Lista 5

Implementado con este código:

<ul> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
    <li>List item 4</li> 
    <li>List item 5</li> 
</ul> 

Ahora, quiero que sea arrastrable. Por ejemplo, si arrastro "Lista de elementos 5" hacia arriba, puedo ubicarlo entre "Lista de elementos 2" y "Elementos de lista 3", y se convertirá en el tercero.

Quiero hacer esto sin jQuery, simplemente Javascript. Además, me gustaría usar HTML5 nativo draggable = "true". Cualquier ayuda sería apreciada.

Answer 1

Simplemente agregue draggable = "true" a sus li-elements.

<ol ondragstart=""> 
<li draggable="true" data-value="data1">List Item 1</li> 
<li draggable="true" data-value="data2">List Item 2</li> 
<li draggable="true" data-value="data3">List Item 3</li> 
</ol> 

Answer 2

El atributo "arrastrable" solo habilita el elemento para arrastrar. Debe implementar el detector DnD e implementar el evento drop para realizar los cambios que desee.

se encuentra el mismo problema que desea resolver en este ejemplo: http://www.html5rocks.com/en/tutorials/dnd/basics/

En el ejemplo que implementan arrastrar y soltar para las columnas A, B y C. El usuario puede cambiar el orden de NOM.

Answer 3

Si está probando con Firefox, tenga en cuenta que también requiere ser enviados algunos datos en la operación de arrastre:

function handleDragStart(e) { 
    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', e.target.innerHTML); 
} 

myLi.addEventListener('dragstart', handleDragStart, false); 

lo contrario, no podría ver la imagen fantasma del contenido que está siendo arrastrado ...

Answer 4

<ul id="parent"> 

    <li class="parent">List item 1</li> 

    <li class="parent">List item 2</li> 

    <li class="parent">List item 3</li> 

    <li class="parent">List item 4</li> 

    <li class="parent">List item 5</li> 
</ul> 

probar esto js

var dragSrcEl = null; 

    function handleDragStart(e) { 
     // Target (this) element is the source node. 
     this.style.opacity = '0.4'; 

     dragSrcEl = this; 

     e.dataTransfer.effectAllowed = 'move'; 
     e.dataTransfer.setData('text/html', this.innerHTML); 
    } 

    function handleDragOver(e) { 
     if (e.preventDefault) { 
      e.preventDefault(); // Necessary. Allows us to drop. 
     } 

     e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. 

     return false; 
    } 

    function handleDragEnter(e) { 
     // this/e.target is the current hover target. 
     this.classList.add('over'); 
    } 

    function handleDragLeave(e) { 
     this.classList.remove('over'); // this/e.target is previous target element. 
    } 

    function handleDrop(e) { 
     // this/e.target is current target element. 

     if (e.stopPropagation) { 
      e.stopPropagation(); // Stops some browsers from redirecting. 
     } 

     // Don't do anything if dropping the same column we're dragging. 
     if (dragSrcEl != this) { 
      // Set the source column's HTML to the HTML of the column we dropped on. 
      dragSrcEl.innerHTML = this.innerHTML; 
      this.innerHTML = e.dataTransfer.getData('text/html'); 
     } 

     return false; 
    } 

    function handleDragEnd(e) { 
     // this/e.target is the source node. 

     [].forEach.call(cols, function (col) { 
      col.classList.remove('over'); 
     }); 
    } 

    var cols = document.querySelectorAll('#parent .parent'); 
    [].forEach.call(cols, function (col) { 
     col.addEventListener('dragstart', handleDragStart, false); 
     col.addEventListener('dragenter', handleDragEnter, false) 
     col.addEventListener('dragover', handleDragOver, false); 
     col.addEventListener('dragleave', handleDragLeave, false); 
     col.addEventListener('drop', handleDrop, false); 
     col.addEventListener('dragend', handleDragEnd, false); 
    });