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

【问题标题】：jquery: draggable plugin -> remove drag behaviour from html5 video controls?jquery：可拖动插件-> 从 html5 视频控件中删除拖动行为？
【发布时间】：2010-06-06 21:34:29
【问题描述】：

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

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

如果我通过单击视频控件拖动视频并再次释放鼠标，视频仍会粘在鼠标上。

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

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

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

【问题讨论】：

您为什么决定使用 html 5。您不需要该应用程序在 ie 和 safari 以及许多其他浏览器中工作？我想说你制作跨浏览器可拖放视频播放器的唯一机会是完全使用 flash 或 silverlight
向 HTML5 的转变令人钦佩......也许他希望它是跨浏览器而不需要插件？这听起来像 mouserelease 事件被视频元素吞噬，而不是传递给可拖动插件。在不同的浏览器中尝试？

标签： jquery jquery-ui draggable

【解决方案1】：

这个很难。视频播放器确实粘在鼠标上并吃掉了那些鼠标向上事件。但是，这是我的解决方法：

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

$(function () {

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

});

【讨论】：

【解决方案2】：

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

您发现视频播放器对mouseup 而非click 事件作出反应。所以每当我停止拖动它时它就会暂停视频，并且我无法取消 mouseup 事件。

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

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

【讨论】：