jquery - 使用mousemove时如何阻止div向上移动？

Question

我试图让盒子不被拖上去，但可以被拖下，这是我想出的但我不知道如何保持原来的位置所以我有一个引用添加它到 if 检查。它只会在您稍微滚动主体后出现。

jsfiddle

window.addEventListener("scroll",function(){
  if($(document).scrollTop() > 100){
    $( ".box" ).slideDown({
      start: function () {
        $(this).css({
          display: "flex"
        })
      }
    });    
  }

  var top = 0;
  var divOverlay = document.getElementsByClassName('box')[0];
  var is_clicked = false;

  divOverlay.addEventListener('mousedown', function(e){   
    is_clicked = true;
    top = divOverlay.offsetTop - e.clientY
  }, true);

  document.addEventListener('mouseup', function(){
    is_clicked = false;
  }, true);

  document.addEventListener('mousemove', function(e){  
    event.preventDefault();

    // add a check here so it doesn't allow dragging the container up?
    if(is_clicked){
      divOverlay.style.top  = (e.clientY + top) + 'px';

      // if the box reaches 50px down, it should automatically hide it if the user
      //$('.box').slideUp();
    }
  }, true);

})

Answer 1

您可以尝试使用 Math.max 将框的最大顶部位置限制为视口(viewport)高度减去框高度:

document.addEventListener('mousemove', function(e){
  event.preventDefault();

  // add a check here so it doesn't allow dragging the container up?
  var maxTop = window.innerHeight - divOverlay.offsetHeight;
  if(is_clicked){
    divOverlay.style.top  = Math.max(maxTop, e.clientY + top) + 'px';

    // if the box reaches 50px down, it should automatically hide it if the user
    //$('.box').slideUp();
  }
}, true);