当前位置：首页 > 全部内容 > 正文

原生JavaScript中HTML5 draggable属性与拖放API详解

作者：代码拾荒

时间：2026-10-31

浏览：631

本文详细解析HTML5新增的draggable属性及其在原生JavaScript中的实际应用。通过介绍dragstart、dragover、drop等核心事件，阐述实现元素拖放的必要条件：设置draggable为true及阻止默认行为。内容涵盖属性语法、事件触发时机及完整代码示例，帮助开发者掌握无依赖的拖放功能实现。

文章目录

定义和用法

draggable 属性用于指定元素是否允许被用户拖动。

注意：浏览器默认允许链接（<a>）和图像（<img>）元素被拖动。

注意：该属性通常配合拖放（Drag and Drop）交互功能使用。

draggable 属性是 HTML5 标准中新增的特性。

语法

<element draggable="true|false|auto">

属性值

值描述
true规定元素是可拖动的。
false规定元素是不可拖动的。
auto使用浏览器的默认特性。

draggable属性的使用

实现拖放功能主要涉及两个关键角色：

（1）源元素A：即被拖动的元素。

（2）目标元素B：即源元素A被放置的目标容器。

举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: springgreen;
    }
  </style>
</head>
<body>
  <div class="one" draggable="true">11</div>
  <div class="two">22</div>
  <script>
  </script>
</body>
</html>

效果

定义和用法

实现拖放需满足以下两个关键点：

（1）源元素必须设置 draggable 属性，且值设为 true。

（2）目标元素必须在 dragover 和 dragenter 事件中调用 preventDefault() 阻止默认行为，否则无法接收放置。

<div class="one" draggable="true">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

满足上述条件后，源元素A在视觉上可以进入目标元素B内部，但松开鼠标后，元素会恢复原位，因为尚未执行实际的DOM操作。

定义和用法

draggable属性的API

针对被拖拽元素A的事件处理

（1）dragstart 方法

当用户按下鼠标并移动时，会在源元素A上触发 dragstart 事件。此时鼠标光标通常会变为“禁止”图标，表示当前不可放置；当光标移动到允许放置的目标元素上方时，该图标会消失。

所谓“允许放置”，即目标元素在 dragover 和 dragenter 事件中调用了 preventDefault() 阻止了默认行为。

示例：在拖动源元素A时，将其背景颜色更改为蓝色。

<div class="one" draggable="true" ondragstart="handleOndragstart(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    e.target.style.backgroundColor='blue';
  }
  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

定义和用法

（2）drag 方法

该事件在 dragstart 之后触发，只要拖动过程持续进行，drag 事件就会不断重复触发。

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    console.log('ondragstart');
  }
  function handleOndrag(e){
    console.log('ondrag');
  }
  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

定义和用法

（3）dragend 方法

该事件在拖动结束时触发，即用户松开鼠标按键的瞬间。

定义和用法

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)" ondragend="handleOndragend(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    console.log('ondragstart');
  }
  function handleOndrag(e){
    console.log('ondrag');
  }

  function handleOndragend(e){
    console.log('ondragend');
  }

  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    e.preventDefault();
  }
</script>

在实际开发中，最常用的是 dragstart 方法，通常在此事件中保存被拖拽元素的数据，以便后续操作使用。

目标元素B的事件处理

目标元素B不需要具有 draggable 属性，任何元素均可作为放置目标。但必须注意，需在 dragover 和 dragenter 事件中阻止默认行为，否则无法接收拖放。

（1）dragenter 方法

当源元素A被拖入目标元素B内部时，触发 dragenter 事件。任何 draggable 属性为 true 的元素进入B都会触发此事件。

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)" ondragend="handleOndragend(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e){
    console.log('ondragstart');
  }
  function handleOndrag(e){
    console.log('ondrag');
  }

  function handleOndragend(e){
    console.log('ondragend');
  }

  function handleOndragover(e){
    e.preventDefault();
  }
  function handleOndragenter(e){
    console.log('ondragenter');
    e.preventDefault();
  }
</script>

定义和用法

注意：此事件的触发不需要松开鼠标。

示例：当A拖入B时，若希望A成为B的子元素，需在此事件中准备DOM操作。

<div class="one" draggable="true" ondragstart="handleOndragstart(event)" ondrag="handleOndrag(event)" ondragend="handleOndragend(event)">11</div>
<div class="two" ondragover="handleOndragover(event)" ondragenter="handleOndragenter(event)">22</div>
<script>
  function handleOndragstart(e) {
    console.log('ondragstart');
  }
  function handleOndrag(e) {
    console.log('ondrag');
  }

  function handleOndragend(e) {
    console.log('ondragend');
  }

  function handleOndragover(e) {
    e.preventDefault();
  }
  function handleOndragenter(e) {
    e.preventDefault();
    e.target.appendChild(document.querySelector('.one'))
  }
</script>

定义和用法

（2）dragover 方法

只要源元素A在目标元素B的区域内移动，dragover 事件就会持续触发（即A在B上方悬浮时）。

function handleOndragover(e) {
  e.preventDefault();
  console.log('ondragover');
}

定义和用法

（3）dragleave 方法

当源元素A从目标元素B内部移出时，触发 dragleave 事件。

注意：必须先触发 dragenter 进入B，随后离开B时才会触发 dragleave。

function handleOndragleave(e){
  console.log('ondragleave');
}

定义和用法

（4）drop 方法

当源元素A被放置在目标元素B中且用户松开鼠标时，触发 drop 事件。与 dragenter 的区别在于，drop 需要鼠标松开才触发。这是实现最终放置逻辑最常用的事件。

示例：当A拖入B并松开鼠标时，若希望A成为B的子元素，需在此事件中执行 DOM 插入操作。

function handleOndrop(e){
  console.log('ondrop');
  e.target.appendChild(document.querySelector('.one'))
}

定义和用法

总结

要实现完整的拖放功能，需具备以下条件：

（1）源元素必须设置 draggable 属性，且值为 true。

（2）核心涉及三个事件：dragstart、dragover、drop。

  • 源元素A需设置 draggable 属性并监听 dragstart 事件。
  • 目标元素B需监听 dragover 和 drop 事件，并在 dragover 中阻止默认行为。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .one {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: springgreen;
    }
  </style>
</head>

<body>
  <div class="one" draggable="true" ondragstart="handleOndragstart(event)">11</div>
  <div class="two" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)">22</div>
  <script>
    function handleOndragstart(e){
      console.log(e);
    }
    function handleOndragover(e){
      e.preventDefault();
    }
    function handleOndrop(e){
      e.target.appendChild(document.querySelector('.one'))
    }
  </script>
</body>

</html>

到此这篇关于原生JavaScript中拖拽属性draggable的使用的文章就介绍到这了,更多相关JavaScript拖拽属性draggable内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS使用Math.round实现保留两位小数的原理与代码

JavaScript 原生 Date 对象怎么实现日期加减

JavaScript函数定义的三种方式：声明、表达式与箭头函数

JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异

JavaScript自学路线图：从基础语法到ES6+核心特性

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例