HTML5拖放教程-可排序列表
有没有人知道一个非常好的HTML5拖放教程？我正在制作一个待办事项列表，我希望能够使用此API对其进行重新排序。我像个疯狂的人一样用谷歌搜索它，现在我开始放弃了……欢迎任何建议！谢谢!
附注:我真的想使用jQuery拖放应用程序接口，而不是html5 -sortable()
回答 3
Stack Overflow用户
发布于 2015-03-10 19:16:42
我已经试着让这个样本尽可能简单。
如果创建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以下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;
}..。你应该得到一个可排序的列表。
您可以在https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap上试用该代码
请注意FireFox中的以下错误：https://developer.mozilla.org/en-US/docs/Web/Events/dragenter
希望这能有所帮助。
Stack Overflow用户
发布于 2012-07-06 06:40:51
有关从头到尾的教程，请查看以下内容：http://taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-lists。
它基于html5sortable：http://farhadi.ir/projects/html5sortable/。关于html5拖放的另一个很棒的教程可以在这里找到：http://www.html5rocks.com/en/tutorials/dnd/basics/。
Stack Overflow用户
发布于 2015-11-19 09:36:30
如果您希望对表行执行此操作，则需要稍作更改：
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';
}https://stackoverflow.com/questions/10588607
复制相似问题
腾讯云开发者
