how to get the start value and end value of a div after dragging <p>hi i have a which is draggable my requirement is 1. iwant the start value and end value of the div after dragging in a text box 2.now its is only drag in right side only i want it dragg also from left side of the div i use some code here but it is not perfect becouse the value is not displaying and the dragging from left is not working midiletable is my parrentdiv</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code> $(function () { var container = $('.middletablediv'), base = null, handle = $('.handle'), isResizing = false, screenarea = screen.width; handle.on('mousedown', function (e) { base = $(this).closest(".scalebar"); isResizing = true; 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; p = parseInt(e.clientX - base.offset().left), // l = parseInt(p * (3 / 11)); base.css('width', p); k = parseInt(xPos - base.offset().left); $("#startvalue").value(k) $("#stopvalue").value(p) }).on('mouseup', function (e) { // stop resizing isResizing = false; }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="middletablediv"&gt; &lt;div id="newvalue1" class="scalebar"&gt; &lt;div class="handle" style="left:0"&gt;&lt;/div&gt; &lt;div class="handle"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;input id="startvalue" type="text"&gt;startvalue&lt;/input&gt; &lt;input id="stopvalue" type="text" /&gt;stopvalue&lt;/input&gt;</code></pre> </div> </div> </p> <p>how i solve this issue </p>