increasing a div width on dragging is not work properly

Question

I have some div . i want adjust div width on dragging

My problem is

1. When i use draggable div id in script only one div work properly

2. If i use the common class all div are adjustable when drag a single one how can solve this?

 $(function () { var container = $('.middletablediv'), base = $('#timebase1'), handle = $('#handle'); handle.on('mousedown', function (e) { isResizing = true; lastDownX = e.clientX; }); $(document).on('mousemove', function (e) { // we don't want to do anything if we aren't resizing. if (!isResizing) return; var p = (e.clientX - base.offset().left); base.css('width', p); }).on('mouseup', function (e) { // stop resizing isResizing = false; }); }) 

 .activelevel1 { background-color: #EA623E; } .timescalebase { margin-top: 13px; height: 7px; position: relative; width: 60px; height: 5px; } #handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: w-resize; background-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" style="width:100%;margin-top:25px;"> <div id="timebase1" class="timescalebase activelevel1"> <div id="handle" ></div> </div> <div id="timebase2" class="timescalebase activelevel1"> <div id="handle"></div> </div> <div id="timebase3" class="timescalebase activelevel1"> <div id="handle"></div> </div> <div id="timebase4" class="timescalebase activelevel1"> <div id="handle"></div> </div> 

Answer 1

When using handle as a common class to make multiple sliders you need to get the parent element (ie timescalebase ) of the handle and use that as base .

You can do this by using jQuery's closest() method in the handle's mousedown handler

  handle.on('mousedown', function(e) {
    base = $(this).closest(".timescalebase");

Demo

 $(function() { var container = $('.middletablediv'), base = null, handle = $('.handle'), isResizing = false; handle.on('mousedown', function(e) { base = $(this).closest(".timescalebase"); isResizing = true; lastDownX = e.clientX; }); $(document).on('mousemove', function(e) { // we don't want to do anything if we aren't resizing. if (!isResizing) return; var p = (e.clientX - base.offset().left); base.css('width', p); }).on('mouseup', function(e) { // stop resizing isResizing = false; }); }) 

 .activelevel1 { background-color: #EA623E; } .timescalebase { margin-top: 13px; height: 7px; position: relative; width: 60px; height: 5px; } .handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: w-resize; background-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" style="width:100%;margin-top:25px;"> <div id="timebase1" class="timescalebase activelevel1"> <div class="handle"></div> </div> <div id="timebase2" class="timescalebase activelevel1"> <div class="handle"></div> </div> <div id="timebase3" class="timescalebase activelevel1"> <div class="handle"></div> </div> <div id="timebase4" class="timescalebase activelevel1"> <div class="handle"></div> </div>