同じ要素にドラッグ＆リサイズを実装する

Question

私は同じ要素にサイズ変更とドラッグを実装しようとしています。これをチェックアウト：

http://jsfiddle.net/Lo8n75dg/

を私のコード今のところ：

$('#dragbar').mousedown(function(e){ 
     e.preventDefault(); 
     $(document).mousemove(function(e){ 
      //$('#position').html(e.pageX +', '+ e.pageY); 
      $('#sidebar').css("width",e.pageX+2-100); 
      $('#main').css("left",e.pageX+2); 
     }); 
    }); 

    $(document).mouseup(function(e){ 
     $(document).unbind('mousemove'); 
    }); 

     $('#sidebar').mousedown(function(e){ 
     e.preventDefault(); 
     $(document).mousemove(function(e){ 
      //$('#position').html(e.pageX +', '+ e.pageY); 
      $('#sidebar').css("margin-left",e.pageX-100-$('#sidebar').offset().left); 
      //$('#main').css("left",e.pageX+2); 
     }); 
    }); 

アイデアは、マウスがダウン黒い線の上に起こった場合には、コードのプリフォームは、サイズを変更ということです。マウスの下が赤い矩形の場合、コードは水平ドラッグを行います。

この2つのイベントは現在競合しているため、ちらつきが表示されます。どのようなアイデアを私はそれを修正するのですか？

更新： http://jsfiddle.net/Lo8n75dg/2/ トリックの一部であるe.stopPropagation（）を追加しました。残念ながら私にはわからない理由のために起こっているちらつきがまだたくさんあります。

Answer 1

以下は、私のためにフィドルで動作するようです。両方の場所でこれを使用してください。

$（ '＃sidebar'）。css（ "position"、 "absolute"）;$（ '＃サイドバー'）。css（ "left"、）;

は、私はそれがあなたのためにどのように動作するかを知ってみましょう:)

Answer 2

あなたが現在ドラッグされているブロック格納できるのMouseMove競合を防ぐために。

const resizebar = { 
    node: wrap.querySelector('.resizebar'), 
    isDragged: false, 
} 
const dragbar = { 
    node: document.querySelector('.dragbar'), 
    width: 200, 
    x: 0, 
    isDragged: false, 
} 

また、私はあなたのコードのちらつき私はネイティブJSでほとんど同じブロックを作ってみましたmargin-left

の計算によるものであることを考える - https://jsfiddle.net/Ellaylone/48h5L8t1/