Javascript jQuery UI可拖动设置不带包含属性的拖动长度

我有一个没有任何父元素的div，我希望可以拖动的div可以拖动到顶部和底部，但不能一直拖动。我用

drag: function (event, ui) {
      if(ui.position.top < 50)
      ui.position.top = 50;
},

然而，我想不出一个方法来做到这一点到底。当元素被拖动到底部时，我需要防止它从某个位置拖动

HTML

Jquery

$( "#draggable" ).draggable({
        axis: 'y',
    containment: 'window',
        scroll: false,
    cancel: false,
    drag: function (event, ui) {
          if(ui.position.top < 50)
          ui.position.top = 50;
    },

});

---

考虑到您的div没有父级，并且您希望将其拖到整个文档中，您应该将其添加到代码中

$( "#draggable" ).draggable({
        axis: 'y',
    containment: 'window',
        scroll: false,
    cancel: false,
    drag: function (event, ui) {
          if(ui.position.top < 50)
          ui.position.top = 50;
          if(ui.position.top > $(document).height() - 50)
          ui.position.top = $(document).height() - 50;
    },

});

---

您需要父级/容器的高度来计算底部偏移：

$("#draggable").draggable({
  axis: 'y',
  containment: 'window',
  scroll: false,
  cancel: false,
  drag: function (event, ui) {
    var offset = 50;
    var maxHeight = (window.innerHeight - this.offsetHeight - offset);

    if (ui.position.top < offset) {
      ui.position.top = offset;
      return false;
    } 
    else if (ui.position.top > maxHeight) {
      ui.position.top = maxHeight;
      return false;
    }
  }    
});

html{ 溢出：隐藏； } .ui小部件内容{ 宽度：100%； 填充：15px； } 把我拖来拖去

---

您需要自己确定这个可拖动元素的父元素/容器，在您的示例fiddle中，它是窗口，所以。谢谢您的回答。但是，如果尝试在同一方向上反复拖动图元，偏移量会增加。是否反复拖动？我在你的小提琴上测试了上面的方法，它似乎很有效。尝试下面的场景，将元素一直向上拖动到顶部，然后再向下拖动元素，再一直拖动到顶部。继续这样做几次。您会注意到可拖动元素不会一直到顶部。删除返回项可以修复它。谢谢你的帮助。感谢您：

$("#draggable").draggable({
  axis: 'y',
  containment: 'window',
  scroll: false,
  cancel: false,
  drag: function (event, ui) {
    var offset = 50;
    var maxHeight = (window.innerHeight - this.offsetHeight - offset);

    if (ui.position.top < offset) {
      ui.position.top = offset;
      return false;
    } 
    else if (ui.position.top > maxHeight) {
      ui.position.top = maxHeight;
      return false;
    }
  }    
});