如何使文本升至输入的拖动位置

Question

如下面的示例

  

例如示例文字

是“输入”字段的值。 输入的末尾有一个滑块。
当用户在输入上滑动时，如何将输入值（示例文本）划分为滑块之前和之后的部分

  

例如示例，文字

使用JAVASCRIPT或JQUERY

Answer 1

我解决了问题。大家有什么建议的话
谢谢

$("body").on("click",".parent_input_here",function () {
    $(".draginput").focus();
  })

  $("body").on("keyup",".draginput",function () {
    input = $(this).val();
    $(".parent_input_here").html('');
    for (var i = 0; i < input.length; i++) {
      $(".parent_input_here").append('<span class="span'+i+'">'+input[i]+'</span>');
    }
  })
  
  imgdrag();
function imgdrag(){
  $(".drag").draggable({
    containment: ".parent_main",
    axis: "x",
    stop: function(e){
      inputVal = $(".draginput").val();
      style = $(this).attr('style')
      stylrArr = style.split('; ')
      xPos = stylrArr[0].replace('left: ','').replace('px','');
      xPos = xPos-9
      len = $(".parent_input_here span").length;

      spanCount = 0;
      for (i = 0; i < len; i++) {
        spanCount = spanCount + $(".span"+i).width();
        if (spanCount>=xPos) {
          break;
        }
      }
      String1 = inputVal.substring(0, i);
      String2 = inputVal.substring(i, inputVal.length)
      $(".displayString").html(String1+"--"+String2);
      
    }
  });
}

.drag{
  position: absolute;
  top: 10px;
  border-left: 1px dashed #f00;
  height: 40px;
  cursor: ew-resize;
  width: 1px;
}
.parent_main > input{
  width: 100%;
  font-size: 20px;
  display: block;
  height: 0;
  padding: 0px;
  margin: 0px;
  border: 0;
}
.parent_input_here{
  height: 40px;
  width: 100%;
  border: 1px solid #c9c9c9;
  padding: 9px 2px;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid red;
  position: absolute;
  top: -6px;
  left: -5.5px;
}
.triangle-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid red;
  position: absolute;
  bottom: -6px;
  left: -5.5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="parent_main" style="width: 200px;margin: 10px;">
  <input type="text" class="draginput">
  <div class="parent_input_here">

  </div>
  <div class="drag">
    <div class="triangle-down">

    </div>
    <div class="triangle-up">

    </div>
  </div>
</div>
<div class="displayString">

</div>