0

Чтобы при зажатии на линию двигать эту линию в пределах блока.

Потылся сделать сам, но что то пошло не так...

let isMoveOrder = 0;

$(document).on('mousedown', '.line', function(e) {
  if (e.button == 0) {
    isMoveOrder = 1;
  }
}).on('mouseup', function(e) {
  isMoveOrder = 0;
});

$(document).on('mousemove', '.line', function(e) {
  if (isMoveOrder) $('.line').css('top', e.pageY +'px');
});
.content {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
}
.line {
  height: 10px;
  background: #090;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="line"></div>
</div>

2 ответа 2

3

Зачем подключать jQuery и не пользоваться её возможностями?

$('.line').draggable({ axis: 'y', containment: 'parent' });
.content {
  height: 100px; width: 200px;
  border: 1px solid #000;
}

.line {
  position: relative;
  top: 50%; left: 0;
  height: 10px; width: 100%;
  background: #090;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>

<div class="content">
  <div class="line"></div>
</div>

3

Вы были на правильном пути, но нужно учесть, что линия находиться внутри ограниченного блока и прописать проверки под это.

Так же, данная часть кода будет работать не корректно.

$(document).on('mousedown', '.line', function(e) {
  if (e.button == 0) {
    isMoveOrder = 1;
  }
}).on('mouseup', function(e) {
  isMoveOrder = 0;
});

Если зажать мышь при наведении на линию то isMoveOrder = 1, а если например отвести мышь в сторону и отпустить скрипт не заработает и isMoveOrder не будет равен 0.

Лучше разделить нажатие и отпускание кнопки

$(document).on('mousedown', '.line', function (e) {
    if (e.button == 0) {
        isMoveOrder = 1;
    }
});

$(document).on('mouseup', function (e) {
    isMoveOrder = 0;
});

Вот рабочий код

let isMoveOrder = 0,
  contentPoistionTop = $('.content').offset().top, // Находим вверхнюю точку родительского блока по отношению к документу
  contentPoistionBottom = contentPoistionTop + $('.content').height(); // Находим нижнюю точку родительского блока по отношению к документу

$(document).on('mousedown', '.line', function(e) {
  if (e.button == 0) {
    isMoveOrder = 1;
  }
});

$(document).on('mouseup', function(e) {
  isMoveOrder = 0;
});

$(document).on('mousemove', '.line', function(e) {
  if (isMoveOrder) {
    let newTopPosition = e.pageY - $('.line').height() / 2 - contentPoistionTop; // Вычисляем значение для перемещения ("Значение курсора" - "вверхняя точка род.блока" - "Половина высоты линии")  P.S. Пол. высоты линии нужна, чтобы центрировать курсор при передвижении? без него передвижение вверх не работает
    if (newTopPosition < 0) { // Из-за рассчета пол. высоты линии, линия вылазит за края, для этого делаем проверку
      newTopPosition = 0;
    } else if (newTopPosition > $('.content').height() - $('.line').height()) {
      newTopPosition = $('.content').height() - $('.line').height();
    }
    $('.line').css('top', newTopPosition + "px");
  }
});
.content {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
}

.line {
  height: 10px;
  background: #090;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="line"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.