Hi Bach Pham,
I think I am beginning to understand this better now - even though I don't have the answer immediately. But I think you will find this interesting.
For most web pages a browser window contains a vertical scroll bar. Of course, a vertical scroll bar doesn't appear if the height of the page being viewed is less than the height of the browser window. When viewing pages in which a scroll bar doesn't appear at first, a bar can usually be made to appear by reducing the height of the browser window (asuming it is not maximized). (Please accept my apologies if this sounds too elementary! I think you will see why I'm bothering with this paragraph!)
In Firefox, go to your demo page
www.demo.joomcore.com/joomla32/index.php/jo-audio-player.
For the first round of tests, be sure there is a scroll bar showing, and start with the it set at the highest possible position - i.e. with the top edge of the page completely visible.
In the "DEMO 2" Player, drag the playlist item "Tim_McMorris_-_Be_My_Valentine" up by one position. During hover the item is highlighted and the first item in the playlist, which was highlighted from the page load, remains highlighted too. When the downclick occurs, the mouse pointer changes to a cross, the item remains highlighted and the first track in the list remains highlighted. When the mouse is released, the mouse pointer changes back to a hand, the dragged item remains highlighted and the first track in the list is no longer highlighted. The dragged track starts to play. This is oops behavior: not what was wanted. Pause the playing. (For the general case we can say... if the dragged track had already been the one playing, play would have started over again at the beginning.)
(For completeness I should mention... Just in case it should turn out you don't get this result with the first drag, try a second drag.)
Now, move the browser window scroll bar down a bit, so that about 50px or so at the top edge of the page is hidden. For example, leave the header text "Joomcore Extensions" fully visible, but only just.
Before continuing, reload the page. After the page is fully loaded, check that the scroll bar has not moved.
Again, drag the playlist item "Tim_McMorris_-_Be_My_Valentine" up by one position. Again, during hover the item is highlighted and the first item in the playlist remains highlighted. While the item is being dragged, this time it suddenly jumps down to a new position. The distance it jumps seems to be related to the number of pixels which are now hidden at the top edge of the page. (It might be the full number of pixels scrolled, or a percentage: that is a piece of the puzzle which is interesting but not urgent to solve right now!) More important, when it jumps, it is no longer highlighted. When the mouse is released, the dragged item is still no longer highlighted except in response to hover. Nothing starts to play. This is not oops behavior: it is okay.
Actually, it's
not quite correct in all respects, because the jumping during dragging is actually a quirk. That is something which occurs with Safari on iOS also, though not exactly the same way. (In that situation, with a very small screen, having another scrollbar for the playlist itself can create a bit of a problem with these tests.)
But - in this case - there is a clue that we will not have oops behavior
before the mouse is released: the clue is that during dragging the item loses its highlighting. During dragging, highlighting transfers to whichever other item becomes under the drag-cross, and vanishes when the drag-cross is over an empty space. With that assurance, we can predict that whichever item was highlighted before dragging will remain highlighted after the mouse is released. Again, in that respect the behavior is okay.
Knowing this, we can now move the browser window scrollbar to-and-fro first to the top, then down a bit again,
without reloading the page. The oops behavior and okay behavior on dragging
is now predictable.
Now, if the display is tall enough to display the page without a vertical scrollbar, repeat the test. The result is oops behavior. Even if the display is not tall enough at first, it should be possible to see the whole page by changing the zoom of the browser window. For example, with a zoom of 30% the test can still be done - even though the text is hard to read.
Do please let me know if you are able to obtain this behavior too. (All of this is with Firefox).
I think that's about as far as I can go with it, with what I have. In order to work more on it I would need to have non-minified versions of at least the js and css files contained in the JO Audio Player module - perhaps others too - I can't be sure.
Thank you again for looking at this.
Rich