我有一些可拖动的div,每个div都有一个文本框来显示该div宽度的宽度,我不知道如何显示它。在这里,脚本用于在脚本变量p中拖动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>

最佳答案

首先从HTML中删除重复的id。您的HTML中应该始终具有唯一的id。你不止一次有“startvalue1”。还要注意,我已经为每个<input>分配了一个ID,这个ID的前缀来自带有滑块的<div>。这样,我就可以轻松地访问我想要的内容,而不必担心以后添加的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>

这是您需要的更新代码。既然我们没有重复的id,我们只需要更改这个值。唯一增加的是下面一行
jQuery('#' + base[0].id + '_value').val(p);

我也把遗忘的
$("#width1").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;

     });
 });

08-26 15:01
查看更多