mr.cool mr.cool - 3 months ago 15
jQuery Question

dragging of a div from left side is not working better

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

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>