Перетаскивание элемента HTML5 не работает в Firefox / Chrome с сенсорным - PullRequest
0 голосов
/ 23 декабря 2018

В моем маленьком проекте https://github.com/ltGuillaume/MusicFolderPlayer я использую перетаскивание HTML5 (т.е. перетаскиваемые элементы), чтобы либо переупорядочить песни, либо удалить их из списка воспроизведения.

Однако в приведенных ниже случаях использования(«НЕ ОК»), нажатие и удерживание любого элемента списка воспроизведения просто не вызывает никакого ответа.Что я делаю не так?

Я использовал отладку через USB для Firefox и Chromium: ошибок (скриптов) не было.

На Android 8 :

  1. ОК: Firefox Focus (v8.0.4 с собственным движком, но, честно говоря, я не думаю, использует его вместо WebView!)
  2. ОК: Бромит(Chromium) v71 ARM 64
  3. НЕ ОК: Firefox v63 / Fennec v64

На Android 5 :

  1. НЕ ОК: Firefox Focus (v8.0.4 с «собственным движком»)
  2. НЕ ОК: Bromite (Chromium) v71 ARM
  3. НЕ ОК: Firefox v63 / Fennec v64

На рабочем столе (Windows 10 x64)

  1. ОК: Firefox 64 / Waterfox 56
  2. ОК: Vivaldi / Ungoogled-Chromium v71
  3. НЕ ОК: Vivaldi / Ungoogled-Chromium v71 с отзывчивым видом (F12, Ctrl + Shift + M)

Код, связанный с поведением: HTML:

<button id="clear" title="Clear the playlist (C)" onclick="clearPlaylist()"
    ondragover="allowDrop(event)" ondrop="removeItem(event)">Clear</button>
<div id="playlist" onclick="playItem(event)" oncontextmenu="if (!playlistonly) findItem(event)"
    ondragstart="prepDrag(event)" ondragover="allowDrop(event)" ondragend="endDrag()" ondrop="dropItem(event)"
    ondragenter="event.target.className += ' over'" ondragleave="event.target.className = event.target.className.replace(' over', '')"
    onmouseenter="onplaylist=true" onmouseleave="onplaylist=false"></div>

Javascript:

function playlistItem(s) {
    var li = document.createElement('li');
    li.className = 'song';
    li.draggable = 'true';
    if (s.id == 'last') {
        li.id = 'last';
    } else {
        li.innerHTML = getSong(s.path) +'<span class="artist">'+ getArtist(s.path, true) +'</span>';
        li.title = getFolder(s.path) + (playlistonly ? '' : '\n\n'+ playlistdesc);
    }
    return li;
}

function prepDrag(e) {
    if (cfg.locked) return e.preventDefault();
    e.stopPropagation();
    dom.clear.className = 'drag';
    dom.clear.textContent = '';
    dom.playlist.appendChild(playlistItem({ 'id': 'last' }));
    if (cfg.index != -1)
        dom.playlist.childNodes[cfg.index].className = 'song';

    drag = e.target;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', getIndex(drag));
}

function allowDrop(e) {
    e.preventDefault();
    e.stopPropagation();
}

function endDrag() {
    if (dom.clear.className != '') {
        dom.clear.className = '';
        dom.clear.textContent = 'Clear';
    }
    if (dom.playlist.hasChildNodes() && dom.playlist.lastChild.id == 'last') {
        dom.playlist.removeChild(dom.playlist.lastChild);
    }
}

function dropItem(e) {
    e.preventDefault();
    e.stopPropagation();
    var to = e.target;
    if (to.tagName.toLowerCase() != 'li') to = to.parentNode;
    log('Drag '+ drag.innerHTML +' to place of '+ to.innerHTML);
    to.className = to.className.replace(' over', '');
    var indexfrom = e.dataTransfer.getData('text');
    var indexto = getIndex(to);
    if (indexto != indexfrom) moveItem(drag, to, indexfrom, indexto);
    if (cfg.index != -1) dom.playlist.childNodes[cfg.index].className = 'playing';
    log('Drag from '+ indexfrom +' to '+ indexto);
    log('Playback index to '+ cfg.index);
}

function moveItem(drag, to, indexfrom, indexto) {
    dom.playlist.insertBefore(drag, to);
    cfg.playlist.splice(indexto - (indexfrom < indexto ? 1 : 0), 0, cfg.playlist.splice(indexfrom, 1)[0]);
    log('Playback index from '+ cfg.index);
    if (cfg.index != -1) {
        if (indexfrom == cfg.index)
            cfg.index = (indexfrom < indexto ? indexto - 1 : indexto);
        else if (indexfrom < cfg.index && indexto > cfg.index)
            cfg.index--;
        else if (indexfrom > cfg.index && indexto <= cfg.index)
            cfg.index++;
    }
}

function removeItem(e) {
    e.preventDefault();
    e.stopPropagation();
    var index = getIndex(drag);
    cfg.playlist.splice(index, 1);
    dom.playlist.removeChild(dom.playlist.childNodes[index]);
    resizePlaylist();
    if (cfg.index != -1 && index <= cfg.index)
        cfg.index--;
    if (cfg.index != -1)
        dom.playlist.childNodes[cfg.index].className = 'playing';
    endDrag();
}
...