javascript - Mootools ドラッグ / iframe でのフォーカスの喪失

Question

Mootools 1.4.5 と Drag Fx を使用しているときに小さな問題が発生します。問題は、そこにiframeがあるため、ドラッグすると（左に）カーソルがフォーカスを失うことです。原因はわかったけど、どうすれば予防できるのかわからない！残念ながら、iframeを使用する必要があります:(

私は次のいずれかの解決策を探しています: 1) フォーカスの喪失を防ぐか、2) マウスが div 領域を離れるのを防ぎます。

どんな助けでも大歓迎です、そして前もって感謝します。

jsfiddle-ここ

コード：

    Html:
    <div id="wrap" class="wrap">
        <div id="left" class="left">
            <div id="drag" class="drag"></div>
            <div id="leftContent" class="leftContent">
                <iframe src="http://www.bing.com/"></iframe>
            </div>
        </div>
        <div id="right" class="right">
            <p>You can use the middle slider to adjust the size of the left div which is very cool. But the problem lies when the mouse enters the iframe during the dragging process. This seems to cause a loss of 'focus'. I would find to find a solution that:</p>
            <ul>
                <li>1) Prevents the loss of focus.</li>or
                <li>2) Prevents the mouse from leaving the div area.</li>
            </ul>
        </div>
    </div>

    Mootools/js:
              var leftDrag = new Drag(left, {
                  modifiers: {
                      x: 'width',
                      y: false
                  },
                  limit: {
                      x: [65, wrap.getSize().x - 65]
                  },
                  onDrag: function () {
                      var l = left.getSize().x;
                      right.setStyles({
                          left: l
                      });
                  }
              }).detach();

              drag.addEvents({
                  mouseenter: function () {
                      this.focus();
                      leftDrag.attach();
                  },
                  mouseleave: function () {
                      leftDrag.detach();
                  }

                  //I have have also tried mousedown/mouseup with no luck
              });

    CSS:
    html {
        padding:0;
        margin:0;
        overflow:hidden;
    }
    p {
        text-align:center;
    }
    .left {
        position:absolute;
        left:0;
        right:50%;
        top:0;
        bottom:0;
        background:azure;
    }
    .leftContent {
        position:absolute;
        left:0;
        right:5px;
        top:0;
        bottom:0;
    }
    .drag {
        position:absolute;
        width:5px;
        top:0;
        bottom:0;
        right:0;
        background:red;
        border:1px solid black;
        cursor:e-resize;
    }
    .right {
        position:absolute;
        left:50%;
        right:0;
        top:0;
        bottom:0;
        background:yellow;
    }
    iframe {
        height:99%;
        width:99%;
        border:none;
    }

編集- 私はそれを理解することになりました! (this.setCapture/releaseCapture) を要素の addEvents に追加する必要がありました。また、マウスダウン/マウスアップでマウスエンター/マウスリーブを切り替えました。HEREで確認できる jsfiddle を更新しました。Mootools は素晴らしいライブラリですが、ドキュメントが少し不足しているため、多くの推測作業が必要になります :( しかし、幸運なことに、このフォーラムと jsfiddle があります!