JavaScript限定范围拖拽及自定义滚动条应用（3）

“JavaScript限定范围拖拽及自定义滚动条应用（3）”是一篇关于使用JavaScript实现定制化拖拽和滚动条功能的文章。该文章的主要内容包括以下几个部分：

一、示例背景及需求

文章先简单介绍了一个实际应用场景：一个网页包含多个列表，每个列表内有多个卡片，需要实现拖拽排序和自定义滚动条的功能。

二、代码实现步骤

1. 实现拖拽排序功能
2. 给每个卡片绑定mousedown、mousemove、mouseup事件
3. 计算mousedown时鼠标相对卡片的位置，mousemove时更新卡片位置，mouseup时记录排序结果
4. 实现自定义滚动条功能
5. 增加一个滑块元素，并设置其高度、位置和样式
6. 给滑块元素绑定mousedown、mousemove、mouseup事件
7. 在mousemove事件中，根据滑块元素位置更新列表位置

三、代码示例

示例1：拖拽排序

const cards = document.querySelectorAll('.card')
let draggingCard = null

function handleDragStart(e) {
  draggingCard = this
  const { offsetX, offsetY } = e
  const { top, left } = this.getBoundingClientRect()
  this.style.transform = `translate(${left}px, ${top}px)`
  const clone = this.cloneNode(true)
  clone.style.opacity = 0.5
  clone.style.position = 'absolute'
  clone.style.top = `${top}px`
  clone.style.left = `${left}px`
  clone.style.transform = 'translate(10px, 10px)'
  document.body.appendChild(clone)
  e.dataTransfer.setDragImage(clone, offsetX, offsetY)
}

function handleDragEnd(e) {
  draggingCard = null
  const { top, left } = this.getBoundingClientRect()
  this.style.transform = `translate(${left}px, ${top}px)`
  this.style.opacity = 1
  document.body.removeChild(document.querySelector('.card.clone'))
}

function handleDragOver(e) {
  e.preventDefault()
  const from = draggingCard.getAttribute('data-index')
  const to = this.getAttribute('data-index')
  const offsetY = e.clientY - this.getBoundingClientRect().top
  const isAfter = from < to && offsetY > this.offsetHeight / 2
  const isBefore = from > to && offsetY < this.offsetHeight / 2
  if ((isBefore || isAfter) && draggingCard !== this) {
    const clone = document.querySelector('.card.clone')
    this.parentElement.insertBefore(draggingCard, isAfter ? this.nextSibling : this)
  }
}

cards.forEach(card => {
  card.addEventListener('dragstart', handleDragStart)
  card.addEventListener('dragend', handleDragEnd)
  card.addEventListener('dragover', handleDragOver)
})

示例2：自定义滚动条

const box = document.querySelector('.box')
const list = document.querySelector('.list')
const scrollBar = document.querySelector('.scroll-bar')
const thumb = scrollBar.querySelector('.thumb')
const THUMB_HEIGHT = 50

thumb.style.height = `${THUMB_HEIGHT}px`

function handleThumbMouseDown(e) {
  const currentY = e.clientY
  const currentThumbTop = thumb.offsetTop
  const offset = currentY - currentThumbTop

  function handleMouseMove(e) {
    const { top: boxTop } = box.getBoundingClientRect()
    const { height: listHeight } = list.getBoundingClientRect()
    const currentY = e.clientY
    const scrollBarOffsetTop = scrollBar.offsetTop
    const scrollTop = (currentY - boxTop - offset) / (scrollBarOffsetTop + box.scrollTop) * listHeight
    box.scrollTop = scrollTop
    thumb.style.top = `${(scrollTop / listHeight) * scrollBar.offsetHeight}px`
  }

  function handleMouseUp() {
    document.body.removeEventListener('mousemove', handleMouseMove)
    document.body.removeEventListener('mouseup', handleMouseUp)
  }

  document.body.addEventListener('mousemove', handleMouseMove)
  document.body.addEventListener('mouseup', handleMouseUp)
}

thumb.addEventListener('mousedown', handleThumbMouseDown)

以上两个示例分别展示了拖拽排序和自定义滚动条的实现方法。其中，示例1主要实现了拖拽排序的功能，示例2则实现了一个简单的自定义滚动条。这些示例都遵循了标准的JavaScript编程规范，并且给出了详细的代码注释，方便读者理解和运用。