Hướng dẫn kéo và thả HTML5 - danh sách có thể sắp xếp

Question

Có ai biết hướng dẫn thực sự tốt cho HTML5 kéo & thả không? Im tạo một danh sách toDo và tôi muốn có thể sắp xếp lại/sắp xếp nó với API này. Tôi đã googling cho nó như một người đàn ông điên và bây giờ im bắt đầu từ bỏ ... BẤT CỨ lời khuyên được hoan nghênh! Cảm ơn!

P.S Tôi thực sự muốn sử dụng html5 kéo & thả API, không jQuery-sắp xếp được()

Answer 1

Đây là một hướng dẫn toàn diện với dễ làm theo các bước.

http://www.html5tuts.co.uk/tutorials/dnd/

Đây là liên kết với ví dụ hoàn chỉnh, chỉ cần thích ứng với nó để phù hợp với nhu cầu của bạn.

http://jsbin.com/ezuke/2051/

Answer 2

Đối với một đầu đến cuối hướng dẫn, kiểm tra này: http://taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-lists.

Được dựa trên html5sortable: http://farhadi.ir/projects/html5sortable/. Một hướng dẫn tuyệt vời khác về kéo và thả của HTML5 có thể tìm thấy tại đây: http://www.html5rocks.com/en/tutorials/dnd/basics/.

Answer 3

Tôi đã cố giữ mẫu này càng đơn giản càng tốt.

Nếu bạn tạo một danh sách HTML:

<ul> 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Apples</li> 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Oranges</li> 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Bananas</li> 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Strawberries</li> 
</ul> 

... và javascript sau:

<script type="text/javascript"> 

    var source; 

    function isbefore(a, b) { 
    if (a.parentNode == b.parentNode) { 
     for (var cur = a; cur; cur = cur.previousSibling) { 
     if (cur === b) { 
      return true; 
     } 
     } 
    } 
    return false; 
    } 

    function dragenter(e) { 
    if (isbefore(source, e.target)) { 
     e.target.parentNode.insertBefore(source, e.target); 
    } 
    else { 
     e.target.parentNode.insertBefore(source, e.target.nextSibling); 
    } 
    } 

    function dragstart(e) { 
    source = e.target; 
    e.dataTransfer.effectAllowed = 'move'; 
    } 

</script> 

... bạn sẽ nhận được một danh sách sắp xếp.

Bạn có thể thử mã trên https://jsfiddle.net/hrohxze0/6/

Hy vọng điều này sẽ hữu ích.

Answer 4

Nếu bạn đang tìm kiếm để làm điều này với hàng bảng bạn cần phải thực hiện một thay đổi nhỏ:

https://jsfiddle.net/cmpenney/6rx6u2kf/

<table> 
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)"> 
     <td style="border: 1px solid black">Apples</td> 
     <td style="border: 1px solid black">A-Column2</td> 
    </tr> 
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)"> 
     <td style="border: 1px solid black">Oranges</td> 
     <td style="border: 1px solid black">O-Column2</td> 
    </tr> 
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)"> 
     <td style="border: 1px solid black">Bananas</td> 
     <td style="border: 1px solid black">B-Column2</td> 
    </tr> 
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)"> 
     <td style="border: 1px solid black">Strawberries</td> 
     <td style="border: 1px solid black">S-Column2</td> 
    </tr> 
</table> 



var source; 

function isbefore(a, b) { 
    if (a.parentNode == b.parentNode) { 
     for (var cur = a; cur; cur = cur.previousSibling) { 
      if (cur === b) { 
       return true; 
      } 
     } 
    } 
    return false; 
} 

function dragenter(e) { 
    var targetelem = e.target; 
    if (targetelem.nodeName == "TD") { 
     targetelem = targetelem.parentNode; 
    } 

    if (isbefore(source, targetelem)) { 
     targetelem.parentNode.insertBefore(source, targetelem); 
    } else { 
     targetelem.parentNode.insertBefore(source, targetelem.nextSibling); 
    } 
} 

function dragstart(e) { 
    source = e.target; 
    e.dataTransfer.effectAllowed = 'move'; 
} 

Answer 5

Nếu bạn đang đi với các giải pháp của adamf (Mar 10 ' 15 lúc 11:16) và muốn sử dụng nó trên các hàng của bảng, hãy thay thế chức năng kéo của đối tượng thành:

function dragenter(e) { 
    var target = e.target; 
    while (target.parentNode.tagName != 'TBODY') { 
     target = target.parentNode; 
    } 

    if (isbefore(source, target)) { 
     target.parentNode.insertBefore(source, target); 
    } 
    else { 
     target.parentNode.insertBefore(source, target.nextSibling); 
    } 
} 

Bằng cách này, mục tiêu sẽ chỉ áp dụng cho các phần tử TR và không phải bất kỳ phần tử con nào của chúng.

Điều tương tự sẽ áp dụng cho các chi tiết ul> li, nếu các yếu tố li có con.

Nếu có img phần tử con, thêm một kéo = "false" thuộc tính cho mỗi.