拖动时增加div宽度无法正常工作

Question

我有一些div。我希望在拖动时调整div宽度

我的问题是

1. 当我在脚本中使用draggable div id时，只有一个div正常工作

2. 如果我使用公共类，则拖动单个div时所有div都是可调整的 怎么解决这个问题？

＆＃13;
＆＃13;
$(function () {
  var container = $('.middletablediv'),
      base = $('#timebase1'),
      handle = $('#handle');

  handle.on('mousedown', function (e) {
    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;
  });

})
＆＃13;
.activelevel1 {
  background-color: #EA623E;
}

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

#handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
  background-color: black;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" style="width:100%;margin-top:25px;">
  <div id="timebase1" class="timescalebase activelevel1">
    <div id="handle" ></div>
  </div>
  <div id="timebase2" class="timescalebase activelevel1">
    <div id="handle"></div>
  </div>
  <div id="timebase3" class="timescalebase activelevel1">
    <div id="handle"></div>
  </div>
  <div id="timebase4" class="timescalebase activelevel1">
    <div id="handle"></div>
  </div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

当使用handle作为公共类来制作多个滑块时，您需要获取timescalebase的父元素（即handle）并将其用作base。

您可以通过在句柄mousedown处理程序

中使用jQuery的closest()方法来执行此操作

  handle.on('mousedown', function(e) {
    base = $(this).closest(".timescalebase");

演示

＆＃13;

＆＃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;

  });
})

＆＃13;

.activelevel1 {
  background-color: #EA623E;
}
.timescalebase {
  margin-top: 13px;
  height: 7px;
  position: relative;
  width: 60px;
  height: 5px;
}
.handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width:100%;margin-top:25px;">
  <div id="timebase1" class="timescalebase activelevel1">
    <div class="handle"></div>
  </div>
  <div id="timebase2" class="timescalebase activelevel1">
    <div class="handle"></div>
  </div>
  <div id="timebase3" class="timescalebase activelevel1">
    <div class="handle"></div>
  </div>
  <div id="timebase4" class="timescalebase activelevel1">
    <div class="handle"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;