js实现div拖动动画运行轨迹效果代码分享

关于“js实现div拖动动画运行轨迹效果代码分享”的完整攻略，主要包含以下几个部分：

基本思路
实现步骤
示例说明

基本思路

实现div拖动动画运行轨迹效果，一般可以采用JS和CSS配合的方式。具体来说，主要实现以下几个步骤：

给div绑定mousedown事件，当鼠标按下时触发。
给document绑定mousemove事件，当鼠标移动时触发。
给document绑定mouseup事件，当鼠标抬起时触发。
随着鼠标移动，动态计算div的left和top值，实现拖动效果。
在mousemove事件中记录鼠标移动的位置，根据位置变化计算出div的偏移量（即left和top），并更新div的位置。
在mouseup事件中解绑document的mousemove和mouseup事件，停止拖动。

实现步骤

1. HTML结构

首先，需要在HTML文件中创建一个div元素，设置其class和id属性：

<div class="drag" id="drag-element"></div>

2. CSS样式

接下来，需要对div元素进行样式设置，在CSS文件中添加以下样式：

.drag {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  cursor: move;
}

3. JS代码

接下来，就可以开始写JS代码了。我们可以将代码拆分为三个部分：事件绑定、拖动计算和动画效果。

事件绑定

首先，需要给div元素绑定mousedown事件，当鼠标按下时触发：

const dragElement = document.getElementById('drag-element')

let isDragging = false
let startX, startY, initialX, initialY, xOffset, yOffset

dragElement.addEventListener('mousedown', function(e) {
  isDragging = true

  startX = e.clientX
  startY = e.clientY

  dragElement.style.transition = ''

  initialX = dragElement.offsetLeft
  initialY = dragElement.offsetTop

  xOffset = startX - initialX
  yOffset = startY - initialY
})

这里先定义了一些变量，包括isDragging、startX、startY、initialX、initialY、xOffset和yOffset。当鼠标按下时，设置isDragging为true，记录当前鼠标位置的x和y坐标，以及div元素初始的left和top值和鼠标相对div元素的偏移量。

接下来，需要给document绑定mousemove事件，当鼠标移动时触发：

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    e.preventDefault()

    const currentX = e.clientX - xOffset
    const currentY = e.clientY - yOffset

    dragElement.style.left = currentX + 'px'
    dragElement.style.top = currentY + 'px'
  }
})

在mousemove事件中，如果当前正在拖动，就防止默认事件，计算新的div位置，更新div的left和top值。

最后，给document绑定mouseup事件，当鼠标抬起时触发：

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

  if (dragElement.offsetLeft < 0) {
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.left = '0'
  }

  if (dragElement.offsetTop < 0) {
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.top = '0'
  }

  if (dragElement.offsetLeft + dragElement.offsetWidth > window.innerWidth) {
    const maxLeft = window.innerWidth - dragElement.offsetWidth
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.left = maxLeft + 'px'
  }

  if (dragElement.offsetTop + dragElement.offsetHeight > window.innerHeight) {
    const maxTop = window.innerHeight - dragElement.offsetHeight
    dragElement.style.transition = '0.5s ease-out'
    dragElement.style.top = maxTop + 'px'
  }
})

在mouseup事件中，需要将isDragging重新设置为false，同时对div的位置进行判断，如果超出窗口边界，就设置div的left和top值为窗口边界的最大值或最小值，并给div元素添加过渡效果。

拖动计算

我们需要在mousedown和mousemove事件中计算div元素的位置和偏移量。在mousedown事件中，代码如下：

initialX = dragElement.offsetLeft
initialY = dragElement.offsetTop

xOffset = startX - initialX
yOffset = startY - initialY

在mousemove事件中，代码如下：

const currentX = e.clientX - xOffset
const currentY = e.clientY - yOffset

动画效果

以上代码已经实现了基本的拖动效果，但还不够流畅。我们可以添加额外的动画效果，让div元素拖动更加自然。在mouseup事件中，可以添加以下代码：

dragElement.style.transition = '0.5s ease-out'
dragElement.style.left = currentX + 'px'
dragElement.style.top = currentY + 'px'

将div元素的过渡时间设置为0.5秒，并用缓动函数使移动更加平滑。

示例说明

下面给出两个示例，分别展示了如何实现纵向拖动和横向拖动的效果。

示例1：纵向拖动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS实现div拖动动画运行轨迹效果-纵向拖动</title>
  <style>
    .drag {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="drag" id="drag-element"></div>

  <script>
    const dragElement = document.getElementById('drag-element')

    let isDragging = false
    let startY, initialY, yOffset

    dragElement.addEventListener('mousedown', function(e) {
      isDragging = true

      startY = e.clientY

      dragElement.style.transition = ''

      initialY = dragElement.offsetTop

      yOffset = startY - initialY
    })

    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        e.preventDefault()

        const currentY = e.clientY - yOffset

        dragElement.style.top = currentY + 'px'
      }
    })

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

      if (dragElement.offsetTop < 0) {
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.top = '0'
      }

      if (dragElement.offsetTop + dragElement.offsetHeight > window.innerHeight) {
        const maxTop = window.innerHeight - dragElement.offsetHeight
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.top = maxTop + 'px'
      }

      dragElement.style.transition = '0.5s ease-out'
    })
  </script>
</body>
</html>

示例2：横向拖动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS实现div拖动动画运行轨迹效果-横向拖动</title>
  <style>
    .drag {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="drag" id="drag-element"></div>

  <script>
    const dragElement = document.getElementById('drag-element')

    let isDragging = false
    let startX, initialX, xOffset

    dragElement.addEventListener('mousedown', function(e) {
      isDragging = true

      startX = e.clientX

      dragElement.style.transition = ''

      initialX = dragElement.offsetLeft

      xOffset = startX - initialX
    })

    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        e.preventDefault()

        const currentX = e.clientX - xOffset

        dragElement.style.left = currentX + 'px'
      }
    })

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

      if (dragElement.offsetLeft < 0) {
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.left = '0'
      }

      if (dragElement.offsetLeft + dragElement.offsetWidth > window.innerWidth) {
        const maxLeft = window.innerWidth - dragElement.offsetWidth
        dragElement.style.transition = '0.5s ease-out'
        dragElement.style.left = maxLeft + 'px'
      }

      dragElement.style.transition = '0.5s ease-out'
    })
  </script>
</body>
</html>

以上就是js实现div拖动动画运行轨迹效果的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现div拖动动画运行轨迹效果代码分享 - Python技术站