html5拖动消失,jquery – 使HTML5视频可拖动而不会丢失控件

添加两个额外的事件检查,一个用于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

});

希望这可以帮助！