web-dev-qa-db-ja.com

HTML5 UL LIドラッグ可能

順不同のリストがあります：

  • リスト項目1
  • リスト項目2
  • リスト項目3
  • リスト項目4
  • リスト項目5

このコードで実装：

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

今、私はそれをドラッグ可能にしたいと思っています。たとえば、「リスト項目5」を上方向にドラッグすると、「リスト項目2」と「リスト項目3」の間に配置でき、3番目になります。

私はjQueryを使わずに、単純なJavascriptでこれを実行したいと考えています。また、ネイティブHTML5 draggable = "true"を使用したいと思います。任意の助けいただければ幸いです。

htmldrag-and-drophtml-listsdraggable
15
Anand Chowdhary

「ドラッグ可能」属性は、要素のドラッグのみを有効にします。必要な変更を行うには、DnDリスナーを実装し、ドロップイベントを実装する必要があります。

この例では、解決したい同じ問題が見つかります： http://www.html5rocks.com/en/tutorials/dnd/basics/

この例では、列A、B、Cにドラッグドロップを実装しています。ユーザーはDnDによって順序を変更できます。

15
18bytes

Firefoxでテストしている場合は、ドラッグ操作でいくつかのデータを送信する必要があることにも注意してください。

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

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

そうしないと、ドラッグされているコンテンツのゴーストイメージが表示されません...

3
Żabojad

Li-elementsにdraggable = "true"を追加するだけです。

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

この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);
    });
0
Prem