從左側拖動div效果不佳

Question

嗨，我有一個div可以從左側和右側拖動山格。現在從右側拖動工作完美。我從左側拖動的問題。當我嘗試從其左側拖動div的寬度時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> 

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>