Javascript HTML5 拖放教程 - 可排序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10588607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tutorial for HTML5 drag&drop - sortable list
提问by tobbe
Do anyone know a really good tutorial for HTML5 drag&drop? Im making a toDo-list and I want to be able to reorder/sort it with this API. I've been googling for it like a mad man and now im start giving up... ANY tips is welcomed! Thanks!
有谁知道一个非常好的 HTML5 拖放教程？我正在制作一个待办事项列表，我希望能够使用此 API 对其进行重新排序/排序。我一直像个疯子一样在谷歌上搜索它，现在我开始放弃......欢迎任何提示！谢谢！
p.s I really want to use html5 drag&drop API, not jQuery-sortable()
ps 我真的很想使用 html5 拖放 API，而不是 jQuery-sortable()
回答by davidf
I've tried to keep this sample as simple as possible.
我试图让这个样本尽可能简单。
If you create a HTML list:
如果您创建一个 HTML 列表：
<ul>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Apples</li>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Oranges</li>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Bananas</li>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Strawberries</li>
</ul>
...and the following javascript:
...以及以下javascript：
var _el;
function dragOver(e) {
if (isBefore(_el, e.target))
e.target.parentNode.insertBefore(_el, e.target);
else
e.target.parentNode.insertBefore(_el, e.target.nextSibling);
}
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", null); // Thanks to bqlou for their comment.
_el = e.target;
}
function isBefore(el1, el2) {
if (el2.parentNode === el1.parentNode)
for (var cur = el1.previousSibling; cur && cur.nodeType !== 9; cur = cur.previousSibling)
if (cur === el2)
return true;
return false;
}
... you should get a sortable list.
...你应该得到一个可排序的列表。
You can try the code on https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
您可以在https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap上尝试代码
Please be aware of the following bug in FireFox: https://developer.mozilla.org/en-US/docs/Web/Events/dragenter
请注意 FireFox 中的以下错误：https: //developer.mozilla.org/en-US/docs/Web/Events/dragenter
Hope this helps.
希望这可以帮助。
回答by KendallB
For a beginning to end tutorial, check this out: http://taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-lists.
有关从头到尾的教程，请查看：http: //taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-lists。
It's based on html5sortable: http://farhadi.ir/projects/html5sortable/. Another great tutorial on HTML5's drag and drop can be found here: http://www.html5rocks.com/en/tutorials/dnd/basics/.
它基于html5sortable：http: //farhadi.ir/projects/html5sortable/。另一个关于 HTML5 拖放的很棒的教程可以在这里找到：http: //www.html5rocks.com/en/tutorials/dnd/basics/。
回答by cmpenney
If you are looking to do this with table rows you need to make a slight change:
如果您希望对表格行执行此操作，则需要稍作更改：
https://jsfiddle.net/cmpenney/6rx6u2kf/
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';
}
回答by Bene Laci
If you're going with the solution by adamf(Mar 10 '15 at 11:16), and want to use it on table rows, replace the dragenterfunction to the following:
如果您要使用adamf的解决方案（2015 年3 月 10 日 11:16），并希望在表格行上使用它，请将dragenter函数替换为以下内容：
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);
}
}
This way the target will only apply for TR elements, and not any of their child elements.
这样，目标将仅适用于 TR 元素，而不适用于它们的任何子元素。
The same thing would apply for ul > listrunctures, if the lielements have children.
如果li元素有子元素，同样的事情也适用于ul > li结构。
If there are imgchild elements, add a draggable="false"attribute to each.
如果有img子元素，则为每个子元素添加一个draggable="false"属性。
