ドラッグ可能なdivの幅をテキストボックスに表示する方法

ドラッグ可能なdivがあり、各divにそのdiv幅の幅を表示するテキストボックスがありますが、表示することはできません。ここでスクリプトは、スクリプト変数pでdivをドラッグするために使用されます。ドラッグ後にdivの幅を保存します。どうすればいいですか？ドラッグ可能なdivの幅をテキストボックスに表示する方法

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

 
      }); 
 
      $("#width1").val("p"); 
 
     })

.activelevel1 { 
 
     background-color: red; 
 
     } 
 

 
     .timescalebase { 
 
     margin-top: 13px; 
 
     height: 7px; 
 
     position: relative; 
 
     width: 200px; 
 
     height: 5px; 
 
     } 
 

 
     .handle { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
     bottom: 0; 
 
     width: 8px; 
 
     cursor: w-resize; 
 
     background-color: black; 
 
     }

<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
<div id="container" style="width:100%;margin-top:25px;"> 
 
     <div id="timebase1" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="startvalue1" type="text" name="number" value="200" min="1" > 
 
     <div id="width1" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="startvalue1" type="text" name="number" value="200" min="1" > 
 
     <div id="width2" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="width3" type="text" name="number" value="200" min="1" > 
 
     <div id="timebase4" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="width4" type="text" name="number" value="200" min="1" > 
 
    </div> 
 
     </body> 
 
    </html>

出典

2016-06-27 aswathy

currentTarget.parent().next('input').val(p);

なぜまともなスライダーの多くがあるとき車輪の再発明。 [jQueryUIには1つあります]（https://jqueryui.com/slider/#rangemin）。 – Miro

まず第一に、あなたのHTMLから重複 IDを削除します。 HTMLには常に一意のIDが必要です。あなたは "startvalue1"を複数回持っています。また、<input>の各IDに、スライダーに<div>から派生した接頭辞が付いているIDが割り当てられていることにも注目してください。そのようにして、後でHTMLを追加することが自分のコードを妨害することなく、簡単に必要なものにアクセスすることができます。

<div id="container" style="width:100%;margin-top:25px;"> 
    <div id="timebase1" class="timescalebase activelevel1"> 
     <div class="handle"></div> 
    </div> 
    <input id="timebase1_value" type="text" name="number" value="200" min="1" > 

    <div id="width1" class="timescalebase activelevel1"> 
     <div class="handle"></div> 
    </div> 
    <input id="width1_value" type="text" name="number" value="200" min="1" > 

    <div id="width2" class="timescalebase activelevel1"> 
     <div class="handle"></div> 
    </div> 
    <input id="width2_value" type="text" name="number" value="200" min="1" > 

    <div id="timebase4" class="timescalebase activelevel1"> 
     <div class="handle"></div> 
    </div> 
    <input id="timebase4_value" type="text" name="number" value="200" min="1" > 
</div>

ここでは、必要な更新コードを示します。 Duplicate IDがないので、Valueを変更するだけです。添加だけは、私はまた、あなたがそこに持っていた忘れ

$("#width1").val("p");

を削除した次の行

jQuery('#' + base[0].id + '_value').val(p);

です。

$(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); 
     jQuery('#' + base[0].id + '_value').val(p); 

     base.css('width', p); 

    }).on('mouseup', function (e) { 
     // stop resizing 
     isResizing = false; 

    }); 
});

出典

2016-06-27 08:13:42 Strahdvonzar

あなたはそれをあなたが始めた方法を行う上で主張する場合、あなたはmousedown上の変数に現在のターゲットを通過した後、mousemoveにそのcurrentTarget VARを使用する必要があります。

次に、そのターゲットに基づいて入力値を設定します。

$(function() { 
 
      var container = $('.middletablediv'), 
 
       base = null, 
 
       handle = $('.handle'), 
 
       isResizing = false, 
 
       currentTarget; 
 
       
 

 

 
      handle.on('mousedown', function (e) { 
 
       base = $(this).closest(".timescalebase"); 
 
       isResizing = true; 
 
       lastDownX = e.clientX; 
 
       currentTarget = $(e.target) 
 
      }); 
 

 
      $(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); 
 
       currentTarget.parent().next('input').val(p); 
 

 
      }).on('mouseup', function (e) { 
 
       // stop resizing 
 
       isResizing = false; 
 
      }); 
 
      $("#width1").val("p"); 
 
     })

.activelevel1 { 
 
     background-color: red; 
 
     } 
 

 
     .timescalebase { 
 
     margin-top: 13px; 
 
     height: 7px; 
 
     position: relative; 
 
     width: 200px; 
 
     height: 5px; 
 
     } 
 

 
     .handle { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
     bottom: 0; 
 
     width: 8px; 
 
     cursor: w-resize; 
 
     background-color: black; 
 
     }

<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
<div id="container" style="width:100%;margin-top:25px;"> 
 
     <div id="timebase1" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="startvalue1" type="text" name="number" value="200" min="1" > 
 
     <div id="width1" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="startvalue1" type="text" name="number" value="200" min="1" > 
 
     <div id="width2" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="width3" type="text" name="number" value="200" min="1" > 
 
     <div id="timebase4" class="timescalebase activelevel1"> 
 
      <div class="handle"></div> 
 
     </div><input id="width4" type="text" name="number" value="200" min="1" > 
 
    </div> 
 
     </body> 
 
    </html>

出典

2016-06-27 08:16:30 Miro

ドラッグ可能なdivの幅をテキストボックスに表示する方法

答えて

関連する問題