Ответ 1
Вот подробный учебник с простыми в использовании шагами.
http://www.html5tuts.co.uk/tutorials/dnd/
Это ссылка на готовый пример, просто адаптируйте его в соответствии с вашими потребностями.
Кто-нибудь знает действительно хороший учебник по перетаскиванию и удалению HTML5? Im, делающий toDo-список, и я хочу, чтобы иметь возможность переупорядочивать/сортировать его с помощью этого API. Я искал его как безумный человек, и теперь я начинаю сдаваться... ЛЮБЫЕ подсказки приветствуются! Спасибо!
p.s Я действительно хочу использовать html5 drag & drop API, а не jQuery-sortable()
Вот подробный учебник с простыми в использовании шагами.
http://www.html5tuts.co.uk/tutorials/dnd/
Это ссылка на готовый пример, просто адаптируйте его в соответствии с вашими потребностями.
Я постарался сделать этот образец максимально простым.
Если вы создаете список 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>
... и следующий 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.
Надеюсь это поможет.
В начале учебника ознакомьтесь с этим: 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/.
Если вы хотите сделать это со строками таблицы, вам нужно внести небольшое изменение:
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';
}
Если вы собираетесь с решением adamf (10 марта 15:15 в 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);
}
}
Таким образом, цель будет применяться только к элементам TR, а не к их дочерним элементам.
То же самое относится и к ul > li strunctures, если элементы li имеют дочерние элементы.
Если есть дочерние элементы img, добавьте к ним атрибут draggable = "false".