mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-01-13 10:50:36 +00:00
Code Issues Releases Wiki Activity

fix: drag and drop issues

Browse Source
This commit is contained in:
jcorporation 2018-07-25 23:15:52 +01:00
parent 51354aaf71
commit f0379365bf
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/css/mpd.css
View File

@ -222,7 +222,7 @@ caption {
} }
.dragover > td { .dragover > td {
border-top:2px solid red; border-top:25px solid transparent;
} }
[draggable] { [draggable] {

32
htdocs/js/mpd.js
View File

@ -370,18 +370,20 @@ function appInit() {
var queueBody=document.getElementById('QueueList').getElementsByTagName('tbody')[0]; var queueBody=document.getElementById('QueueList').getElementsByTagName('tbody')[0];
queueBody.addEventListener('dragstart', function(event) { queueBody.addEventListener('dragstart', function(event) {
if (event.target.nodeName == 'TR') { if (event.target.nodeName == 'TR') {
//event.target.style.opacity = '0.4'; event.target.classList.add('opacity05');
event.target.style.display = 'none'; event.dataTransfer.setDragImage(event.target, 0, 0);
event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('Text', event.target.getAttribute('id')); event.dataTransfer.setData('Text', event.target.getAttribute('id'));
dragEl = event.target.cloneNode(true); dragEl = event.target.cloneNode(true);
} }
}, false); }, false);
queueBody.addEventListener('dragleave', function(event) { queueBody.addEventListener('dragleave', function(event) {
if (event.target.nodeName == 'TD') { event.preventDefault();
event.preventDefault(); var target = event.target;
event.target.parentNode.classList.remove('dragover'); if (event.target.nodeName == 'TD')
} target = event.target.parentNode;
if (target.nodeName == 'TR')
target.classList.remove('dragover');
}, false); }, false);
queueBody.addEventListener('dragover', function(event) { queueBody.addEventListener('dragover', function(event) {
event.preventDefault(); event.preventDefault();
@ -390,7 +392,11 @@ function appInit() {
for (var i = 0; i < trLen; i++) { for (var i = 0; i < trLen; i++) {
tr[i].classList.remove('dragover'); tr[i].classList.remove('dragover');
} }
event.target.parentNode.classList.add('dragover'); var target = event.target;
if (event.target.nodeName == 'TD')
target = event.target.parentNode;
if (target.nodeName == 'TR')
target.classList.add('dragover');
event.dataTransfer.dropEffect = 'move'; event.dataTransfer.dropEffect = 'move';
}, false); }, false);
queueBody.addEventListener('dragend', function(event) { queueBody.addEventListener('dragend', function(event) {
@ -399,16 +405,20 @@ function appInit() {
for (var i = 0; i < trLen; i++) { for (var i = 0; i < trLen; i++) {
tr[i].classList.remove('dragover'); tr[i].classList.remove('dragover');
} }
document.getElementById(event.dataTransfer.getData('Text')).style.display = ''; if (document.getElementById(event.dataTransfer.getData('Text')))
document.getElementById(event.dataTransfer.getData('Text')).classList.remove('opacity05');
}, false); }, false);
queueBody.addEventListener('drop', function(event) { queueBody.addEventListener('drop', function(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
var target = event.target;
if (event.target.nodeName == 'TD')
target = event.target.parentNode;
var oldSongpos = document.getElementById(event.dataTransfer.getData('Text')).getAttribute('data-songpos'); var oldSongpos = document.getElementById(event.dataTransfer.getData('Text')).getAttribute('data-songpos');
var newSongpos = event.target.parentNode.getAttribute('data-songpos'); var newSongpos = target.getAttribute('data-songpos');
document.getElementById(event.dataTransfer.getData('Text')).remove(); document.getElementById(event.dataTransfer.getData('Text')).remove();
dragEl.style.display = ''; dragEl.classList.remove('opacity05');
queueBody.insertBefore(dragEl, event.target.parentNode); queueBody.insertBefore(dragEl, target);
var tr = queueBody.querySelectorAll('.dragover'); var tr = queueBody.querySelectorAll('.dragover');
var trLen = tr.length; var trLen = tr.length;
for (var i = 0; i < trLen; i++) { for (var i = 0; i < trLen; i++) {