В моем маленьком проекте https://github.com/ltGuillaume/MusicFolderPlayer я использую перетаскивание HTML5 (т.е. перетаскиваемые элементы), чтобы либо переупорядочить песни, либо удалить их из списка воспроизведения.
Однако в приведенных ниже случаях использования(«НЕ ОК»), нажатие и удерживание любого элемента списка воспроизведения просто не вызывает никакого ответа.Что я делаю не так?
Я использовал отладку через USB для Firefox и Chromium: ошибок (скриптов) не было.
На Android 8 :
- ОК: Firefox Focus (v8.0.4 с собственным движком, но, честно говоря, я не думаю, использует его вместо WebView!)
- ОК: Бромит(Chromium) v71 ARM 64
- НЕ ОК: Firefox v63 / Fennec v64
На Android 5 :
- НЕ ОК: Firefox Focus (v8.0.4 с «собственным движком»)
- НЕ ОК: Bromite (Chromium) v71 ARM
- НЕ ОК: Firefox v63 / Fennec v64
На рабочем столе (Windows 10 x64)
- ОК: Firefox 64 / Waterfox 56
- ОК: Vivaldi / Ungoogled-Chromium v71
- НЕ ОК: 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();
}