从左侧拖动div效果不佳

Question

hi i have a div which is drag-gable form left side and right side .now the dragging from right side is working perfect .my problem in the dragging from left side .when i try to drag the div from its left side the width of the div is completely gone and only the drag value is get as width i want increase or decrease my width from left side of my 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> 

Answer 1

Check this, is this what you want

 $(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>