web-dev-qa-db-fra.com

HTML5 UL LI Draggable

J'ai une liste non ordonnée:

  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3
  • Élément de liste 4
  • Élément de liste 5

Implémenté avec ce code:

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

Maintenant, je veux que ce soit glissable. Par exemple, si je déplace "Elément de liste 5" vers le haut, je peux le placer entre "Elément de liste 2" et "Elément de liste 3" et il deviendra troisième.

Je veux faire cela sans jQuery, il suffit de Javascript. De plus, j'aimerais utiliser le HTML5 natif draggable = "true". Toute aide serait appréciée.

html5drag-and-drophtml-listsdraggable
13
Anand Chowdhary

L'attribut "draggable" permet uniquement à l'élément de glisser. Vous devez implémenter l'écouteur DnD et implémenter l'événement drop pour apporter les modifications souhaitées.

Vous trouverez le même problème que vous souhaitez résoudre dans cet exemple: http://www.html5rocks.com/en/tutorials/dnd/basics/

Dans l'exemple, ils implémentent le glisser-déposer pour les colonnes A, B et C. L'utilisateur peut modifier l'ordre par DnD.

14
18bytes

Si vous testez avec Firefox, notez que certaines données doivent également être envoyées lors de l'opération glisser:

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

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

Sinon, vous ne verriez pas l'image fantôme du contenu que vous faites glisser ...

3
Żabojad

Ajoutez simplement draggable = "true" à vos éléments-li.

<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>
3
luke
<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>

essayez ce 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);
    });
1
Prem