该博客介绍了如何通过JavaScript实现视频播放器的拖动控制优化。通过添加mousedown和mouseup事件监听器，检查鼠标相对于视频的y坐标，在控制区域禁用draggable。当鼠标抬起时，始终重新启用draggable，确保元素可拖动。这种方法阻止了在控制区域的意外点击事件，提高了用户体验。
添加两个额外的事件检查,一个用于mousedown,另一个用于mouseup.
在mousedown上检查相对于视频的y坐标.如果在控制部分禁用draggable,如果不允许.
在mouseup处理程序中,始终启用draggable,以便元素可拖动,直到下一次检查鼠标位置.
这样,点击事件将不会传递给浏览器的拖动处理.
$('#videoPlayer').on('mousedown',function (e) {
var wrapper = $('#videoPlayer_wrapper'),// calc relative mouse pos
rect = wrapper[0].getBoundingClientRect(),y = e.clientY - rect.top;
if (y > $('#videoPlayer')[0].height - 40) { // if in ctrl zone disable drag
wrapper.draggable('disable');
}
});
$('#videoPlayer').on('mouseup',function (e) {
$('#videoPlayer_wrapper').draggable('enable'); // always enable
});
希望这可以帮助！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
