左側からdivをドラッグしたほうがうまくいきません

Question

こんにちは私はドラッグゲイブルフォームの左側と右側です。私はdiv要素の幅が完全に消えているだけドラッグ値が幅として取得されて、私は私のdivの左側から

$(function() { 
 
     var container = $('.middletablediv'), 
 
     base = null, 
 
     handle = $('.handle'), 
 
     isResizing = false, 
 
     isLeftDrag = false; 
 
    screenarea = screen.width; 
 

 
     handle.on('mousedown', function (e) { 
 
      base = $(this).closest(".scalebar"); 
 
      isResizing = true; 
 
      if($(this).attr('id')=='lefthandle')isLeftDrag=true; 
 
      else isLeftDrag=false; 
 
      lastDownX = e.clientX; 
 
      offset = $(this).offset(); 
 
      xPos = offset.left; 
 

 
     }); 
 

 
     $(document).on('mousemove', function (e) { 
 
      // we don't want to do anything if we aren't resizing. 
 
      if (!isResizing) 
 
       return; 
 
      if(isLeftDrag){ 
 
       
 
       p = parseInt(base.offset().left - e.clientX); 
 
      k = parseInt(base.offset().left - xPos); 
 
       
 
       base.css('margin-left',-p); 
 
       base.css('width',p); 
 
       } 
 
      else{ 
 
      p = parseInt(e.clientX - base.offset().left), 
 
      // l = parseInt(p * (3/11)); 
 
      base.css('width', p); 
 
      k = parseInt(xPos - base.offset().left); 
 
      } 
 
      //if(k>p){var temp = k; k = p; p = temp;} 
 

 
      
 
     }).on('mouseup', function (e) { 
 
      // stop resizing 
 
      isResizing = false; 
 

 

 

 

 
     }); 
 
     });

.handle{ 
 
    position: absolute; 
 

 
    top:1px; 
 
    right: 0; 
 
    width: 10px; 
 
    height: 5px; 
 
    cursor: w-resize; 
 
    } 
 
    .middletablediv{ 
 
    float:left; 
 
    width:35%; 
 
    
 
} 
 
    .scalebar{ 
 
    margin-top: 13px; 
 
    height: 7px; 
 
    position: relative; 
 
    width:20px; 
 
    background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="middletablediv" style="padding-left:100px; overflow:visible;"> 
 
    <div id="newvalue1" class="scalebar"> 
 
     <div class="handle"id="lefthandle" style="left:0"></div> <div class="handle"></div> 
 
    </div> 
 
</div><br><br> 
 
    
 

を自分の幅を増減したいその左側からのdivをドラッグしようとすると、

Answer 1

これをチェックしてください、これはあなたが欲しいものです

$(function() { 
 
     var container = $('.middletablediv'), 
 
     base = null, 
 
     handle = $('.handle'), 
 
     isResizing = false, 
 
     isLeftDrag = false; 
 
    screenarea = screen.width, 
 
    oldWidth = 0; 
 

 
     handle.on('mousedown', function (e) { 
 
      base = $(this).closest(".scalebar"); 
 
      isResizing = true; 
 
      if($(this).attr('id')=='lefthandle')isLeftDrag=true; 
 
      else isLeftDrag=false; 
 
      lastDownX = e.clientX; 
 
      offset = $(this).offset(); 
 
      xPos = offset.left; 
 

 
     }); 
 

 
     $(document).on('mousemove', function (e) { 
 
      // we don't want to do anything if we aren't resizing. 
 
      if (!isResizing) 
 
       return; 
 
      if(isLeftDrag){ 
 
       
 
       p = parseInt(base.offset().left - e.clientX); 
 
      k = parseInt(base.offset().left - xPos); 
 
       
 
       base.css('margin-left',-p); 
 
       base.css('width',(p + oldWidth)); 
 
       } 
 
      else{ 
 
      p = parseInt(e.clientX - base.offset().left), 
 
      // l = parseInt(p * (3/11)); 
 
      base.css('width', p); 
 
      k = parseInt(xPos - base.offset().left); 
 
      } 
 
      //if(k>p){var temp = k; k = p; p = temp;} 
 

 
      
 
     }).on('mouseup', function (e) { 
 
      // stop resizing 
 
      isResizing = false; 
 
      oldWidth = base.width(); 
 

 

 

 
     }); 
 
     });

.handle{ 
 
    position: absolute; 
 

 
    top:1px; 
 
    right: 0; 
 
    width: 10px; 
 
    height: 5px; 
 
    cursor: w-resize; 
 
    } 
 
    .middletablediv{ 
 
    float:left; 
 
    width:35%; 
 
    
 
} 
 
    .scalebar{ 
 
    margin-top: 13px; 
 
    height: 7px; 
 
    position: relative; 
 
    width:20px; 
 
    background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="middletablediv" style="padding-left:100px; overflow:visible;"> 
 
    <div id="newvalue1" class="scalebar"> 
 
     <div class="handle"id="lefthandle" style="left:0"></div> <div class="handle"></div> 
 
    </div> 
 
</div><br><br>