0

我在使用 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 中。我还用 mousedown/mouse up 切换了 mouseenter/mouseleave。我更新了可以在这里看到的jsfiddle。Mootools 是一个很棒的库，但是他们的文档有点缺乏，这导致了很多猜测工作:(但幸运的是我们有这个论坛和 jsfiddle！

4

1 回答 1

0

我终于弄明白了！我只需要将 (this.setCapture/releaseCapture) 添加到元素的 addEvents 中。我还用 mousedown/mouse up 切换了 mouseenter/mouseleave。我更新了可以在这里看到的jsfiddle。Mootools 是一个很棒的库，但是他们的文档有点缺乏，这导致了很多猜测工作:(但幸运的是我们有这个论坛和 jsfiddle！

yourelementid.addEvents({
mousedown:function(){
this.setCapture();
..put your code here element.drag({});
},
mouseup:function(){
this.releaseCapture();
}
});
于 2013-09-30T16:38:36.513 回答