jquery：可拖动插件 ->从 html5 视频控件中删除拖动行为？

Question

我正在使用 jquery ui 可拖动插件，并且我有一个带有“预加载控件”的 html 5 视频元素，它的行为有点错误。 如果我

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

通过单击视频控件来拖动视频，然后再次释放鼠标，视频仍然会粘在鼠标上。

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

如果我开始在视频控件上拖动视频，我就没有机会再次发布视频。

知道我该如何解决这个问题吗！我可能应该编写自己的视频控件脚本来解决这个问题。

Answer 1

这一次很艰难。视频播放器确实坚持鼠标并吃掉那些鼠标松开事件。但是，这是我的解决方法：

我在鼠标悬停期间检查鼠标位置的内部 Y 坐标（可调值），如果它超出范围，我会禁用拖放功能。我看到 mousemove() 事件在粘性时继续触发，因此这看起来像是逻辑的理想访问点：

$(function () {

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

});

Answer 2

我遇到了同样的问题 - 我需要一个可拖动的视频播放器，在播放时可以拖动，但一旦暂停，它就会折叠回缩略图状态。

正如您发现的，视频播放器对 mouseup 做出反应，而不是对 click 事件做出反应。因此，每当我停止拖动视频时，它就会暂停视频，并且我无法取消 mouseup 事件。

我找到的唯一解决方案是用一个 DIV 覆盖视频，该 DIV 用作 jQuery UI Draggable 的句柄。 Draggable 使用了 mousedown、mouseup 和 mousemove 事件，但我咳嗽了 click 事件并暂停了视频。

但是，此解决方案不适用于重叠控件 - 否则您将需要自定义控件。