• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    html5 拖拽及用 js 实现拖拽功能的示例代码

    发布者: 雪落无声 | 发布时间: 2025-6-16 12:30| 查看数: 81| 评论数: 0|帖子模式

    1. HTML5 拖拽

    1.1 相关知识

    拖拽元素：可以为元素添加
    1. draggable="true"
    复制代码
    来让元素能够被拖拽。
    拖拽元素的事件监听：（应用于拖拽元素）
         
      1. ondragstart
      复制代码
      当拖拽开始时调用   
      1. ondragleave
      复制代码
      当鼠标离开拖拽元素时调用   
      1. ondragend
      复制代码
      当拖拽结束时调用   
      1. ondrag
      复制代码
      整个拖拽过程都会调用
    目标元素：把元素A拖拽到元素B里，那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。
    目标元素的事件监听：（应用于目标元素）
         
      1. ondragenter
      复制代码
      当拖拽元素进入时调用   
      1. ondragover
      复制代码
      当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）   
      1. ondrop
      复制代码
      当在目标元素上松开鼠标时调用   
      1. ondragleave
      复制代码
      当鼠标离开目标元素时调用
    如果想让拖拽元素在目标元素里做点事情，就必须要在
    1. ondragover()
    复制代码
    里加
    1. event.preventDefault()
    复制代码
    这一行代码。
    1.2 拖拽基础
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>Document</title>
    7.         <style>
    8.             .box {
    9.                 width: 200px;
    10.                 height: 200px;
    11.                 background: green;
    12.             }
    13.             .box2 {
    14.                 position: relative;
    15.                 left: 300px;
    16.                 top: 50px;
    17.                 width: 300px;
    18.                 height: 300px;
    19.                 background: red;
    20.             }
    21.         </style>
    22.     </head>
    23.     <body>
    24.         <div class="box" draggable="true"></div>
    25.         <div class="box2"></div>
    26.         <script>
    27.             // HTML5 拖拽
    28.             // 应用于拖拽元素
    29.             var box = document.querySelector('.box')
    30.             box.ondragstart = function () {
    31.                 console.log('拖拽开始')
    32.             }
    33.             box.ondragleave = function () {
    34.                 console.log('鼠标离开元素')
    35.             }
    36.             box.ondragend = function () {
    37.                 console.log('拖拽结束')
    38.             }
    39.             // box.ondrag = function () {
    40.             //     console.log('在拖拽');
    41.             // }

    43.             // 应用于目标元素（想把 box 拖拽进去的地方）
    44.             var box2 = document.querySelector('.box2')
    45.             box2.ondragenter = function () {
    46.                 console.log('进来了')
    47.             }
    48.             box2.ondragleave = function () {
    49.                 console.log('离开了')
    50.             }

    52.             // 当拖拽元素在 目标元素上时，连续触发
    53.             box2.ondragover = function (e) {
    54.                 // 如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。
    55.                 e.preventDefault()
    56.                 console.log('over')
    57.             }
    58.             box2.ondrop = function () {
    59.                 console.log('松开鼠标了')
    60.             }
    61.         </script>
    62.     </body>
    63. </html>
    复制代码
    1.3 将 A 在 B、C 之间拖拽
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>Document</title>
    7.         <style>
    8.             .box-b {
    9.                 width: 250px;
    10.                 height: 250px;
    11.                 background: green;
    12.             }
    13.             .cell-a {
    14.                 float: left;
    15.                 width: 50px;
    16.                 height: 50px;
    17.                 margin: 5px;
    18.                 text-align: center;
    19.                 line-height: 50px;
    20.                 border-radius: 50%;
    21.                 background: red;
    22.             }
    23.             .box-c {
    24.                 width: 200px;
    25.                 height: 200px;
    26.                 margin-top: 10px;
    27.                 background: skyblue;
    28.             }
    29.         </style>
    30.     </head>
    31.     <body>
    32.         <p>boxB</p>
    33.         <div class="box-b">
    34.             <div class="cell-a" draggable="true">1</div>
    35.             <div class="cell-a" draggable="true">2</div>
    36.             <div class="cell-a" draggable="true">3</div>
    37.             <div class="cell-a" draggable="true">4</div>
    38.             <div class="cell-a" draggable="true">5</div>
    39.         </div>
    40.         <p>boxC</p>
    41.         <div class="box-c"></div>
    42.         <script>
    43.             var cellA = document.querySelectorAll('.cell-a')
    44.             var boxB = document.querySelector('.box-b')
    45.             var boxC = document.querySelector('.box-c')
    46.             var temp = null

    48.             cellA.forEach((cell, index) => {
    49.                 // 从 boxB 拖拽到 boxC
    50.                 cell.ondragstart = function () {
    51.                     // 保持当前拖拽的元素
    52.                     temp = this
    53.                 }
    54.                 cell.ondragend = function () {
    55.                     temp = null
    56.                 }
    57.                 boxC.ondragover = function (e) {
    58.                     e.preventDefault()
    59.                 }
    60.                 boxC.ondragenter = function () {
    61.                     this.appendChild(temp)
    62.                 }

    64.                 // 从 boxC 拖拽到 boxB
    65.                 boxB.ondragover = function (e) {
    66.                     e.preventDefault()
    67.                 }
    68.                 boxB.ondragenter = function () {
    69.                     this.appendChild(temp)
    70.                 }
    71.             })
    72.         </script>
    73.     </body>
    74. </html>
    复制代码
    效果展示

    2. 用 js 实现拖拽

    2.1 js 简单拖拽

    按下鼠标进行简单的拖拽。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>Document</title>
    7.         <style>
    8.             #box {
    9.                 position: absolute;
    10.                 width: 200px;
    11.                 height: 200px;
    12.                 background: green;
    13.             }
    14.         </style>
    15.         <script>
    16.             window.onload = function () {
    17.                 var box = document.getElementById('box')
    18.                 var disX = 0
    19.                 var disY = 0

    21.                 box.onmousedown = function (e) {
    22.                     var e = e || window.event
    23.                     disX = e.clientX - this.offsetLeft
    24.                     disY = e.clientY - this.offsetTop
    25.                     box.onmousemove = function (e) {
    26.                         var e = e || window.event
    27.                         box.style.left = e.clientX - disX + 'px'
    28.                         box.style.top = e.clientY - disY + 'px'
    29.                     }
    30.                     box.onmouseup = function (e) {
    31.                         console.log('end')
    32.                         this.onmousemove = null
    33.                     }
    34.                     return false
    35.                 }
    36.             }
    37.         </script>
    38.     </head>
    39.     <body>
    40.         <div id="box"></div>
    41.     </body>
    42. </html>
    复制代码
    效果展示

    2.2 带效果的拖拽
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>Document</title>
    7.         <style>
    8.             .box {
    9.                 position: absolute;
    10.                 width: 200px;
    11.                 height: 200px;
    12.                 background: skyblue;
    13.             }
    14.             .box1 {
    15.                 position: absolute;
    16.                 border: 1px dashed black;
    17.                 opacity: 0.5;
    18.             }
    19.             .way-box {
    20.                 position: absolute;
    21.                 bottom: 30px;
    22.                 right: 30px;
    23.                 /* 无法选中 */
    24.                 -moz-user-select: none; /* 火狐 */
    25.                 -webkit-user-select: none; /* 谷歌 */
    26.                 -ms-user-select: none; /* IE */
    27.                 user-select: none;
    28.             }
    29.         </style>
    30.         <script>
    31.             window.onload = function () {
    32.                 ;(function () {
    33.                     var box = document.querySelector('.box')
    34.                     var disX, disY, temp
    35.                     var body = document.querySelector('body')
    36.                     var way1 = document.querySelector('#way1')
    37.                     var way2 = document.querySelector('#way2')

    39.                     box.onmousedown = function (e) {
    40.                         var e = e || window.event // 兼容性写法
    41.                         disX = e.clientX - this.offsetLeft
    42.                         disY = e.clientY - this.offsetTop

    44.                         temp = document.createElement('div')
    45.                         body.appendChild(temp)
    46.                         temp.classList.add('box')
    47.                         temp.classList.add('box1')
    48.                         // 移动后位置会变，temp 的位置应该与 box 位置重合
    49.                         temp.style.left = e.clientX - disX + 'px' // 记得加单位！
    50.                         temp.style.top = e.clientY - disY + 'px'

    52.                         temp.onmousemove = function (e) {
    53.                             var e = e || window.event
    54.                             temp.style.left = e.clientX - disX + 'px' // 记得加单位！
    55.                             temp.style.top = e.clientY - disY + 'px'
    56.                         }
    57.                         temp.onmouseup = function (e) {
    58.                             console.log('end')
    59.                             this.onmousemove = null
    60.                             // 1 则默认不发生实际移动
    61.                             if (way2.checked) {
    62.                                 box.style.left = e.clientX - disX + 'px'
    63.                                 box.style.top = e.clientY - disY + 'px'
    64.                             }
    65.                             temp.style.display = 'none'
    66.                             this.onmouseup = null
    67.                         }
    68.                     }
    69.                 })()
    70.             }
    71.         </script>
    72.     </head>
    73.     <body>
    74.         <div class="box"></div>
    75.         <div class="way-box">
    76.             <p>请选择拖拽的方式</p>
    77.             <input type="radio" id="way1" name="way" checked />
    78.             <label for="way1">1</label>
    79.             <input type="radio" id="way2" name="way" />
    80.             <label for="way2">2</label>
    81.         </div>
    82.     </body>
    83. </html>
    复制代码
    效果展示

    有时会卡顿，未解决…
    到此这篇关于html5 拖拽及用 js 实现拖拽的文章就介绍到这了,更多相关html5 拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/749464.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表