HTML5 UL LI Draggable

Question

Tôi có một danh sách có thứ tự:

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

Được thực hiện với mã này:

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

Bây giờ, tôi muốn nó có thể kéo được. Ví dụ: nếu tôi kéo "Liệt kê mục 5" trở lên, tôi có thể đặt nó giữa "Mục danh sách 2" và "Mục danh sách 3" và nó sẽ trở thành thứ ba.

Tôi muốn làm điều này mà không cần jQuery, chỉ đơn giản là Javascript. Ngoài ra, tôi muốn sử dụng HTML5 có thể kéo được = "true". Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Chỉ cần thêm draggable = "true" vào các phần tử li của bạn.

<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

Thuộc tính "draggable" chỉ cho phép phần tử kéo. Bạn cần triển khai trình nghe DnD và triển khai sự kiện thả để thực hiện các thay đổi bạn muốn.

Bạn sẽ tìm thấy cùng một vấn đề bạn muốn giải quyết trong ví dụ này: http://www.html5rocks.com/en/tutorials/dnd/basics/

Trong ví dụ này họ thực hiện kéo-thả cho các cột A, B và C. Người dùng có thể thay đổi thứ tự bằng DND.

Answer 3

Nếu bạn đang thử nghiệm với Firefox, lưu ý rằng nó cũng đòi hỏi một số dữ liệu được gửi trong các hoạt động kéo:

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

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

Nếu không, bạn sẽ không nhìn thấy những hình ảnh ma quái của nội dung đang được kéo ...

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> 

thử này 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); 
    });