2

<div>YouTubeビデオが埋め込まれたページがあり、サイズ変更およびドラッグ可能（JQuery UIを使用）を使用して領域を定義できるカスタムオーバーレイを実装しようとしています。

画面の他の領域でドラッグする<div>と、完全に応答しますが、ビデオの上にある場合（重要な場合は、IFrame APIを使用して埋め込まれます）、クロール以外の場所でマウスを動かすと、定期的にグリップが失われます。 'サイズ変更ハンドルまたは移動ハンドル。これは、IEとChromeの両方に当てはまります。

JSFiddleはこちら：http ：//jsfiddle.net/MfZes/1/ （ドラッグ可能なボックスはYouTubeフレームの下にあります）

これがなぜであるか、またはそれが回避可能かどうかを誰かが知っていますか？

前もって感謝します。

4

2 に答える 2

5

私は前にこれをしました。

jquery uiのサイズ変更可能およびドラッグ可能なプラグインのdragstart、resizestart、dragstop、およびresizestopイベントにフックできます。

ビデオをコンテナdivに入れます。ビデオの横に、オーバーレイとして機能する別のdivを挿入します。幅と高さを100％に設定し、絶対に配置して、ディスプレイを非表示に設定します。

サイズ変更/ドラッグ開始イベントが発生したら、オーバーレイdivを表示します。彼らが止まったら、それを隠します。（サイズ変更やドラッグを行っていないときにビデオを操作できるようにしたいので、非表示にする必要があります。

于 2013-03-08T16:09:51.340 に答える
0

同じ問題が発生しましたが、キャンバスにカーソルを合わせると次のようになります。

$('.DraggableDiv').draggable({
    start : function() {
        var d = document.createElement('div');
        $(d).addClass('canvas_shadow');
        $('.canvasContainer').append(d);
    },
    stop : function() {
        $( ".canvas_shadow" ).remove();
});

.canvas_shadowにcssを追加します。

.canvas_shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: 80;
}
于 2017-04-05T07:30:13.120 に答える