对搜索栏的拖动范围设置限制

#search-bar {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 30px;
  background-color: #f0f0f0;
  cursor: move;
}

var searchBar = document.getElementById('search-bar');
var isDragging = false;
var startX, startY;

searchBar.addEventListener('mousedown', function(event) {
  isDragging = true;
  startX = event.clientX - searchBar.offsetLeft;
  startY = event.clientY - searchBar.offsetTop;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    var newX = event.clientX - startX;
    var newY = event.clientY - startY;

    // 设置拖动范围限制
    var maxX = window.innerWidth - searchBar.offsetWidth;
    var maxY = window.innerHeight - searchBar.offsetHeight;
    newX = Math.max(0, Math.min(newX, maxX));
    newY = Math.max(0, Math.min(newY, maxY));

    searchBar.style.left = newX + 'px';
    searchBar.style.top = newY + 'px';
  }
});

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