jquery: draggable plugin -> remove drag behaviour from html5 video controls?

Question

hi guys,

im working with the jquery ui draggable plugin and i have an html 5 video element with "preload controls" that acts kind of buggy. I

$(".thumb").draggable();

if i drag the video by clicking on the video controls and i'm releasing the mouse again, the video still sticks with the mouse.

<div class='thumb video'><video width='260' height='200' preload controls>

i have no chance to release the video again if i started draggin it at the video controls.

any idea how i could fix this! i probaply should script my own video controls to fix this.

Answer 1

This one was tough. The video player really did stick to the mouse and eat those mouse up events. However, here's my workaround:

I check the internal Y coordinate of the mouse position during mouse over (adjustable value) and if it's outside of the range, I disable the drag-n-drop feature. I saw that the mousemove() event continued to fire when it was sticky, so that looked like an ideal access point for the logic:

$(function () {

    $('.thumb')
        .draggable()
        .mousemove(function (e) {
            var yAxis = e.pageY - this.offsetTop;
            $(this).draggable("option", "disabled", (yAxis > 150) ? true : false);
        });

});