jQuery ui 可拖动元素在滚动 div 之外不可“拖动”

使用jQuery UI可以轻松地为网站添加交互性功能，其中之一就是可拖动元素。然而，有时候我们希望在一个滚动的div中只能在特定范围内拖动元素，而在div之外则不可拖动。在本文中，我们将学习如何实现这个功能，并提供一个案例代码供参考。

html
  
可拖动元素1
  
可拖动元素2
  
可拖动元素3
  
可拖动元素4
  
可拖动元素5

javascript
$( function() {
  $(".draggable").draggable({
    containment: ".scrollable"
  });
});

javascript
$( function() {
  $(".draggable").draggable({
    containment: ".scrollable",
    start: function(event, ui) {
      // 获取元素的位置
      var offset = $(this).offset();
      var x = offset.left;
      var y = offset.top;
      
      // 获取滚动的div的位置
      var scrollableOffset = $(".scrollable").offset();
      var scrollableX = scrollableOffset.left;
      var scrollableY = scrollableOffset.top;
      
      // 获取滚动的div的宽度和高度
      var scrollableWidth = $(".scrollable").width();
      var scrollableHeight = $(".scrollable").height();
      
      // 检查元素是否在滚动的div之外
      if (x < scrollableX || x > scrollableX + scrollableWidth || y < scrollableY || y > scrollableY + scrollableHeight) {
        // 阻止拖动
        return false;
      }
    }
  });
});

html
  
  
  
  
  
  
    
可拖动元素1
    
可拖动元素2
    
可拖动元素3
    
可拖动元素4
    
可拖动元素5