使HTML5video可拖动而不会丢失控件

我在这个jsfiddle中有一个HTML5video播放器 – http://jsfiddle.net/6B7w7/可以正常工作。 当您单击“Video1 – BranFerren”行时，video会加载并播放，控件工作正常：

Video 1 - BranFerren &nbsp&nbsp6:15
 
   

但是我希望能够在播放时将播放器拖动到屏幕的不同部分。 所以我尝试制作video播放器本身，＃videoPlayer或videoPlayer包装器div，＃videoPlayer_wrapper，可拖动到JavaScript的第3行和第4行。

  3 //$('#videoPlayer_wrapper').draggable(); 4 //$('#videoPlayer').draggable(); 

取消注释这些行之一会使video播放器可以拖动，但我无法再在video控件上设置位置或音频滑块。

有谁知道我如何使video可拖动，仍然能够控制播放位置和音量？

谢谢

Answer 1

添加两个额外的事件检查，一个用于mousedown ，另一个用于mouseup 。

在mousedown检查相对于video的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 }); 

希望这可以帮助！