ドラッグ時のdivの幅を増やすと正しく動作しない

Question

私はいくつか持っていますdivです。私は

をドラッグで div幅を調整したい

私の問題は、私は一般的なクラスを使用する場合は、適切

すべてのdivの時に調整することが唯一のdiv作業スクリプトでドラッグ可能なのdiv idを使用する場合

1. です単一のものをドラッグ これをどのように解決できますか？あなたがhandleの親要素（すなわちtimescalebase）を取得し、baseとしてそれを使用する必要があり、複数のスライダーを作るために、共通のクラスとしてhandleを使用して

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

。

あなたはハンドルのmousedownハンドラ

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

デモ

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

でjQueryの closest()メソッドを使用してこれを行うことができます