jQuery UI Draggable 设置没有包含属性的拖动长度答案

【问题标题】：jQuery UI Draggable set drag length without containment propertyjQuery UI Draggable 设置没有包含属性的拖动长度
【发布时间】：2019-02-15 15:12:20
【问题描述】：

我有一个没有任何父元素的 div，我希望可拖动的 DIV 拖动到顶部和底部，但不是一直拖动。我已经完成了使用，

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

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

JSFIDDLE

HTML

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

jQuery

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

});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

$("#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;
    }
  }    
});

当拖动效果超出边界时，可能需要返回 false 以取消或基本上“释放”拖动效果。

这是您对上述更改的看法：

$("#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;
      //turn false;
    }
  },

});

html {
  overflow: hidden;
}

.ui-widget-content {
    width: 100%;
    padding: 15px;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

【讨论】：

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

【解决方案2】：

考虑到您的 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;
    },

});

【讨论】：