draggleフレキシブルスプリッターを作る際のバグ

私はいくつかのパネルの中でdraggleスプリッターを作りたいと思います。インターネットにはいくつかの図書館があります。私はa solutionを見つけました。これは短いですが、どのライブラリ（JQueryを除く）からも独立しています。draggleフレキシブルスプリッターを作る際のバグ

しかし、最初のスプリッタをドラッグした後、2番目のスプリッタをドラッグすると1つのスプリッタをドラッグすると、もう一方のスプリッタがドラッグされることがあります。これは確かに期待されていません。

誰でも修正方法を知っていますか？

(function($) { 
 
    $.fn.drags = function(opt) { 
 

 
    opt = $.extend({ 
 
     handle: "", 
 
     cursor: "ew-resize", 
 
     min: 10 
 
    }, opt); 
 

 
    if (opt.handle === "") { 
 
     var $el = this; 
 
    } else { 
 
     var $el = this.find(opt.handle); 
 
    } 
 

 
    var priorCursor = $('body').css('cursor'); 
 

 
    return $el.css('cursor', opt.cursor).on("mousedown", function(e) { 
 

 
     priorCursor = $('body').css('cursor'); 
 
     $('body').css('cursor', opt.cursor); 
 

 
     if (opt.handle === "") { 
 
     var $drag = $(this).addClass('draggable'); 
 
     } else { 
 
     var $drag = $(this).addClass('active-handle').parent().addClass('draggable'); 
 
     } 
 
     var z_idx = $drag.css('z-index'), 
 
     drg_h = $drag.outerHeight(), 
 
     drg_w = $drag.outerWidth(), 
 
     pos_y = $drag.offset().top + drg_h - e.pageY, 
 
     pos_x = $drag.offset().left + drg_w - e.pageX; 
 
     $drag.css('z-index', 1000).parents().on("mousemove", function(e) { 
 

 
     var prev = $('.draggable').prev(); 
 
     var next = $('.draggable').next(); 
 

 
     // Assume 50/50 split between prev and next then adjust to 
 
     // the next X for prev 
 

 
     var total = prev.outerWidth() + next.outerWidth(); 
 

 
     console.log('l: ' + prev.outerWidth() + ', r:' + next.outerWidth()); 
 

 
     var leftPercentage = (((e.pageX - prev.offset().left) + (pos_x - drg_w/2))/total); 
 
     var rightPercentage = 1 - leftPercentage; 
 

 
     if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) { 
 
      return; 
 
     } 
 

 
     console.log('l: ' + leftPercentage + ', r:' + rightPercentage); 
 

 
     prev.css('flex', leftPercentage.toString()); 
 
     next.css('flex', rightPercentage.toString()); 
 

 
     $(document).on("mouseup", function() { 
 
      $('body').css('cursor', priorCursor); 
 
      $('.draggable').removeClass('draggable').css('z-index', z_idx); 
 
     }); 
 
     }); 
 
     e.preventDefault(); // disable selection 
 
    }); 
 

 
    } 
 
})(jQuery); 
 

 
$('.handle').drags();

.flex-box { 
 
    display: flex; 
 
    width: 100%; 
 
    margin: 0; 
 
    height: 300px; 
 
} 
 
.flex-box .col { 
 
    border: 1px solid green; 
 
    flex: 0.33; 
 
    padding: 12px; 
 
    overflow-y: auto; 
 
    overflow-x: hide; 
 
} 
 
.handle { 
 
    width: 5px; 
 
    text-align: center; 
 
    color: white; 
 
    transition: all ease-in 0.1s; 
 
} 
 
.draggable { 
 
    background: pink; 
 
} 
 
body {}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="flex-box"> 
 
    <div class="col"> 
 
     <h1>Drag The splitters</h1> 
 
     <p>Pellentesque ...</p> 
 
    </div> 
 
    <div class="handle"></div> 
 
    <div class="col"> 
 
     <h1>Magic</h1> 
 
     <p>Pellentesque ...</p> 
 
    </div> 
 
    <div class="handle"></div> 
 
    <div class="col"> 
 
     <h1>Magic 2</h1> 
 
     <p>Pellentesque ...</p> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-12-22 Anonymous

スニペットはこれを試してみると – Piou

OKを編集するように実行されているのは素晴らしいだろう、私はちょうどそれはスマートだ... –

そこにそこに行くいくつかのことがあって、それは（私はクレジットカード受け入れる行いますP）のすべてを把握するために私にいくつかの時間がかかったまず、いくつかのイベントが夢中に保つた

、mouseupのように、私はmousemoveも信じています。

次に、サイジングの問題に関して、スプリッタの周りの2つの要素がフレックスコンテナの100％を共有していると考えていました。 3つ以上の要素がある場合、これは当然間違っています。それに応じ式を補正し、それが完璧に動作して

var totalPercentage = parseFloat(prev.css('flex')) + parseFloat(next.css('flex'));

：私がやったことは、2つの要素がサイズ変更操作に関係しているのフレックスボックスの共有割合を取得することだけでした。

(function($) { 
 
    $.fn.drags = function(opt) { 
 

 
    opt = $.extend({ 
 
     handle: "", 
 
     cursor: "ew-resize", 
 
     min: 10 
 
    }, opt); 
 

 
    if (opt.handle === "") { 
 
     var $el = this; 
 
    } else { 
 
     var $el = this.find(opt.handle); 
 
    } 
 

 
    var priorCursor = $('body').css('cursor'); 
 

 
    return $el.css('cursor', opt.cursor).on("mousedown", function(e) { 
 
     
 
     priorCursor = $('body').css('cursor'); 
 
     $('body').css('cursor', opt.cursor); 
 

 
     if (opt.handle === "") { 
 
     var $drag = $(this).addClass('draggable'); 
 
     } else { 
 
     var $drag = $(this).addClass('active-handle').parent().addClass('draggable'); 
 
     } 
 
     
 
     var z_idx = $drag.css('z-index'), 
 
     drg_h = $drag.outerHeight(), 
 
     drg_w = $drag.outerWidth(), 
 
     pos_y = $drag.offset().top + drg_h - e.pageY, 
 
     pos_x = $drag.offset().left + drg_w - e.pageX; 
 
     
 
     var mouseMove = function(e) { 
 
     
 
     //console.log("mousemove"); 
 
     var prev = $('.draggable').prev(); 
 
     var next = $('.draggable').next(); 
 

 
     // Assume 50/50 split between prev and next then adjust to 
 
     // the next X for prev 
 

 
     var total = prev.outerWidth() + next.outerWidth(); 
 
     
 
     var totalPercentage = parseFloat(prev.css('flex')) + parseFloat(next.css('flex')); 
 

 
     //console.log('l: ' + prev.outerWidth() + ', r:' + next.outerWidth()); 
 
     var offset = prev.offset(); 
 
     if(offset){ 
 
      
 
      var leftPercentage = ((e.pageX - offset.left - drg_w/2)/total) * totalPercentage; 
 
      var rightPercentage = totalPercentage - leftPercentage; 
 

 
      if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) { 
 
      return; 
 
      } 
 

 
      //console.log('l: ' + leftPercentage + ', r:' + rightPercentage); 
 
      
 
      prev.css('flex', leftPercentage.toString()); 
 
      next.css('flex', rightPercentage.toString()); 
 
     } 
 
     } 
 
     
 
     $drag.css('z-index', 1000).parent().on("mousemove", mouseMove).on("mouseup", function() { 
 
      //console.log("mouseup"); 
 
      $(this).off("mousemove", mouseMove).off("mouseup"); 
 
      $('body').css('cursor', priorCursor); 
 
      $('.draggable').removeClass('draggable').css('z-index', z_idx); 
 
     }); 
 
     e.preventDefault(); // disable selection 
 
    }); 
 
    
 
    
 
    } 
 
})(jQuery); 
 

 
$('.handle').drags();

.flex-box { 
 
    display: flex; 
 
    width: 100%; 
 
    margin: 0; 
 
    height: 300px; 
 
} 
 
.flex-box .col { 
 
    border: 1px solid green; 
 
    flex: 0.33; 
 
    padding: 12px; 
 
    overflow-y: auto; 
 
    overflow-x: hide; 
 
} 
 
.handle { 
 
    width: 5px; 
 
    text-align: center; 
 
    color: white; 
 
    transition: all ease-in 0.1s; 
 
} 
 
.draggable { 
 
    background: pink; 
 
} 
 
body {}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="flex-box"> 
 
    <div class="col"> 
 
     <h1>Drag The splitters</h1> 
 
     <p>Pellentesque ...</p> 
 
    </div> 
 
    <div class="handle"></div> 
 
    <div class="col"> 
 
     <h1>Magic</h1> 
 
     <p>Pellentesque ...</p> 
 
    </div> 
 
    <div class="handle"></div> 
 
    <div class="col"> 
 
     <h1>Magic 2</h1> 
 
     <p>Pellentesque ...</p> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-12-22 20:58:18 Piou

はどうもありがとうございました...スニペットを挿入します修正する... –

draggleフレキシブルスプリッターを作る際のバグ

答えて

関連する問題