ドラッグ後にdivの開始値と終了値を取得する方法

Question

こんにちは私はドラッグ可能です。私の必要条件は です。1.テキストボックス内でドラッグした後にdivの開始値と終了値を指定してください。 2.nowそれは右側にドラッグだけです私はそれもdivの左側からドラッグしたい 私はここでいくつかのコードを使用していますが、値が表示されていないと左からのドラッグが働いていないので完璧ではないですmidrentableは私のparrentdivです

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

 

 

 

 
     }); 
 
     });

.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"> 
 
    <div id="newvalue1" class="scalebar"> 
 
     <div class="handle" style="left:0"></div> <div class="handle"></div> 
 
    </div> 
 
</div> 
 
    <input id="startvalue" type="text">startvalue</input> 
 
    <input id="stopvalue" type="text" />stopvalue</input>

この問題を解決する方法

Answer 1

value()の代わりにval()を使用してください。また、ドラッグの方法は、開始値よりも小さくすることができるので、簡単な方法で問題を処理するためにいくつかの方法を追加しました。最後に、左からドラッグするには、左ドラッグを別々に処理する必要があります。そのため、左ハンドルに一意のIDを渡し、親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;} 
 

 
      $("#startvalue").val(k) 
 
      $("#stopvalue").val(p) 
 
     }).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> 
 
    <input id="startvalue" type="text">startvalue</input> 
 
    <input id="stopvalue" type="text" />stopvalue</input>