拖拽事件一共分为 7 种:
在开始移动的时候触发 ondragstart
在移动中触发 ondrag
拖拽结束的事件 ondragend
拖拽元素进入目标元素时触发 ondragenter
在目标元素中移动中 ondragover
离开目标元素时触发 ondragleave
鼠标松开时触发 ondrop
拖拽的声明周期:
1, 拖拽开始
2, 拖拽进行中
3, 拖拽结束
拖拽的组成
被拖拽的物体
目标区域
下面我们来用代码以便更好的观察拖拽事件的各个阶段
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 拖拽 --API
- </title>
- <style>
- body{ margin: 0; } .draggable-box{ width: 100px; height: 100px; background-color:
- #abcdee; position: absolute; margin-top: 10px; margin-left: 20px; } .target{
- width: 200px; height: 200px; border: 1px solid black; margin: 10px auto;
- }
- </style>
- </head>
- <body>
- <!-- chrome Safari 正常使用, Firefox 部分浏览器支持 -->
- <div class="draggable-box" draggable="true">
- </div>
- <div class="target">
- </div>
- <!-- 默认可拖拽的标签 -->
- <!-- <a href="#"> 超链接 aaa</a>
- <img src="imgs/bg.jpg"> -->
- <script>
- var oDragDiv = document.getElementsByClassName("draggable-box")[0];
- /*
- 拖拽的声明周期:
- 1, 拖拽开始
- 2, 拖拽进行中
- 3, 拖拽结束
- 拖拽的组成
- 被拖拽的物体
- 目标区域
- */
- // 在开始移动的时候触发
- var beginX = 0,
- beginY = 0;
- oDragDiv.ondragstart = function(e) {
- // 鼠标距离元素边框的距离
- beginX = e.offsetX;
- beginY = e.offsetY;
- // console.log(beginX,beginY);
- // e.dataTransfer.effectAllowed = "copyMove";//copy move copyMove all
- }
- oDragDiv.ondrag = function(e) {
- // 在移动中触发
- // console.log('在移动中触发了')
- }
- // 拖拽结束的事件
- oDragDiv.ondragend = function(e) {
- // console.log(e.clientX,e.clientY);
- var x = e.clientX - beginX;
- var y = e.clientY - beginY;
- // oDragDiv.style.left = x + "px";
- // oDragDiv.style.top = y + "px" ;
- console.log('over');
- }
- // 目标元素的事件
- var oDragTarget = document.getElementsByClassName('target')[0] oDragTarget.ondragenter = function(e) {
- // 拖拽元素进入目标元素时触发
- // 注意: 只有鼠标进入时才触发
- // console.log(e);
- }
- oDragTarget.ondragover = function(e) {
- // 在目标元素中移动中
- // console.log(e);
- e.dataTransfer.effectAllowed = "copyMove";
- // 阻止直接触发拖拽事件的结束
- e.preventDefault();
- }
- // 离开目标元素时触发
- oDragTarget.ondragleave = function(e) {
- // console.log(e);
- console.log('leave')
- }
- // 移动的元素从目标元素中离开以后触发
- /*
- ondrop 这个行为触发了两个事件 回到原处 离开目标元素 --- 链模式 a - b/c
- */
- // 鼠标松开时触发
- oDragTarget.ondrop = function(e) {
- // console.log(e)
- console.log('ondrop');
- }
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3210355.html