Вопрос по html5, javascript – Учебник для HTML5 drag & drop - сортируемый список

24

Кто-нибудь знает действительно хороший учебник для HTML5 перетаскивания? Я делаю ToDo-список, и я хочу иметь возможность изменить / отсортировать его с помощью этого API. Я гуглил это как сумасшедший, и теперь я начинаю сдаваться ... ЛЮБЫЕ советы приветствуются! Спасибо!

ps я действительно хочу использовать html5 API перетаскивания, а не jQuery-sortable ()

Почему бы просто не поискать это? Первый результат в Google охватывает все, что вам нужно ... Mike Robinson
Найти эту информацию до сих пор на удивление трудно. Это 2018 год, мы все еще используем jQuery-сортируемую версию везде? Существует множество учебников по перетаскиванию в HTML5, но ничего не говорится о переупорядочении. SystemParadox
Я имею. Но я просто не могу найти хороший, который объясняет основы в хорошем смысле. (Да, я совсем новичок в JavaScript) tobbe

Ваш Ответ

5   ответов
5

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

Это ссылка на готовый пример, просто адаптируйте его под свои нужды.

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

jsbin, похоже, не работает, и веб-сайт больше не работает.
спасибо, пожалуйста, проверьте это tobbe
Этот учебник не обрабатывал возможность изменить порядок / сортировку
Проработайте основы, если во время прохождения учебного пособия вы столкнетесь с проблемами, лучше опубликовать конкретную проблему, чтобы люди лучше понимали ситуацию и были более готовы помочь.
2

adamf (10 марта 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 структуры, еслиli элементы имеют детей.

Если естьimg дочерние элементы, добавьтеdraggable="false" приписать каждому.

45

Если вы создаете список 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/askfinney/pen/qKXgap

Пожалуйста, имейте в виду следующую ошибку в FireFox: https://developer.mozilla.org/en-US/docs/Web/Events/dragenter

Надеюсь это поможет.

Это было очень полезно для меня - спасибо!
Ваша скрипка не работает в FF
Вы можете использовать «touchstart». Что касается браузера, сенсорные события и события мыши должны быть разделены. Если у вас гибридный ноутбук, у вас будет как мышь, так и сенсорный ввод. Тем не менее, я обнаружил, что в некоторых браузерах для настольных компьютеров странные вещи случаются при использовании события touchmove. Например, объект может улететь с экрана, если щелкнуть по нему мышью. Однажды я уверен, что спецификации уляжутся, и все будет работать правильно. Мы просто еще не совсем там.
Я выгляжу именно так, но это не работает в мобильных и Ipad. как мы можем сделать это для мобильного устройства также ???
Добавлениеe.dataTransfer.setData('text/plain',null) чтобы событие dragstart заставило его работать на firefox
6

вам нужно внести небольшое изменение:

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';
}
IN Mobile Device Сценарий не работал
Это работает довольно хорошо!
Ваша скрипка тоже не работает в FF
6

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

Автор не желает иметь дело с зависимостями jQuery. - "не jQuery-сортируемый ()"

Похожие вопросы