iframeのサイズ変更がうまく機能しない

drag'n'dropサイズ変更のサポートが追加されたiframeを使用していますが、うまく機能しません。 MouseUpはほとんどの場合発砲されません。それについて私は何ができますか？あなたはドラッグないとき、あなたのmouseUpおよびmouseMoveイベントイベントは、他の要素に発生する可能性がありiframeのサイズ変更がうまく機能しない

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>MB Docs</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body style="margin:5px;"> 
 
     <table id="maingrid" cellpadding="0" cellspacing="0" style="border:0px;"><tr> 
 
     <div style="float:left;"> 
 
      <td><iframe id="ifmenu" name="menu" height="600" width="200" style="border:1px solid #999;"></iframe></td> 
 
      <td id="ifdivider" style="width:3px;cursor:col-resize;"></td> 
 
      <td><iframe id="ifmain" name="main" height="600" width="300" style="border:1px solid #999;"></iframe></td> 
 
     </tr></table> 
 
    </body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
     function doResize() { 
 
      //set height and width of frames 
 
      var h = window.innerHeight - 10; 
 
      $('#ifmenu').css('height', h); 
 
      $('#ifmain').css('height', h); 
 
     } 
 
     
 
     window.onresize = function(event) { 
 
      doResize(); 
 
     } 
 
     
 
     $(document).ready(function() { 
 
      doResize(); 
 
      
 
     //attach drag support divider. 
 
     var isDragging = false; 
 
     var xOffset = 0; 
 
     $('#ifdivider').mousedown(function(e) { 
 
      isDragging = true; 
 
      xOffset = e.pageX; 
 
      console.log('down'); 
 
     }); 
 

 
     $('#ifmenu').mouseup(function() { 
 
      isDragging = false; 
 
      console.log('up');    
 
     }); 
 

 
     $('#maingrid').mousemove(function(e) {    
 
      if (isDragging && e.pageX < 500) { 
 
       $('#ifmenu').css('width',e.pageX - 2); 
 
       console.log('move');    
 
      } 
 
     }); 
 
     
 
}); 
 
    </script> 
 
</html>

出典

2016-12-20 Teson

。 mouseUp/mouseMoveをウインドウ境界の外側に置くと、一部のブラウザーではまったく発生しないこともあります。

特定のオブジェクトではなく、ドラッグを開始してからそれらのハンドラを削除する場合にのみ、mouseUpおよびmouseMoveイベントをドキュメント全体に配置できます。

ex。（未テスト）

$('#ifdivider').mousedown(function(e) { 

    isDragging = true; 
    xOffset = e.pageX; 
    console.log('down'); 

    $(document).one('mouseup', function() { 
     isDragging = false; 
     $(document).off('mousemove.dragging'); 
     console.log('up');    
    }); 

    $(document).on('mousemove.dragging', function(e) {  
     if (isDragging && e.pageX < 500) { 
      $('#ifmenu').css('width',e.pageX - 2); 
      console.log('move');    
     } 
    }); 
});

出典

2016-12-20 15:25:35 Ethorsen

iframeのサイズ変更がうまく機能しない

答えて

関連する問題