Question

我有一些可拖动的div，每个div都有一个文本框来显示div宽度的宽度，我不知道如何显示它。这里的脚本用于拖动脚本变量p中的div，拖动后存储div宽度我怎么能这样做？

＆＃13;

 $(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");
        })

＆＃13;

  .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;
        }

＆＃13;

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

＆＃13;

Answer 1

首先从HTML中删除重复的 ID。您应始终在HTML中拥有唯一的ID。你有＆＃34; startvalue1＆＃34;不止一次。另请注意，我为您的每个setTimeout(function(){ $('form.display-hide').trigger(); }, 2000);分配了一个ID，该ID具有从您的滑块<input>派生的前缀。通过这种方式，我可以轻松访问我想要的内容，而不必担心以后的HTML添加会干扰我的代码。

<div>

以下是您需要的更新代码。现在我们没有重复ID，我们只需要更改Value。唯一的补充是以下一行

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

我也删除了被遗忘的

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

你在那里。

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

Answer 2

如果您坚持以您开始的方式执行此操作，则必须在mousedown上的变量中传递当前目标，然后将currentTarget var用于mousemove

然后根据该目标设置输入值。 currentTarget.parent().next('input').val(p);

＆＃13;

 $(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");
        })

＆＃13;

  .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;
        }

＆＃13;

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

＆＃13;

如何在文本框中显示可拖动的div宽度

2 个答案: