定义和用法

ondrag 事件在元素或者选取的文本被拖动时触发。

拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。

注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放的过程中会触发以下事件：

    • 在拖动目标上触发事件 (源元素):

      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
  • 释放目标时触发的事件:

    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>拖动事件</title>

        <meta charset="utf-8">

        <style>

            .box{

                width: 200px;

                height: 100px;

                border: 1px solid #c0a;

                margin: 20px;

                float: left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <p id="p"

            draggable="true"

            ondragstart="dragStart(event)"

            ondrag="drag(event)"

            ondragend="dragEnd(event)"

            >

            要拖动的内容</p>

        </div>

        <div class="box"

            ondragenter="dragEnter(event)"

            ondragleave="dragLeave(event)"

            ondragover="dragOver(event)"

            ondrop="drop(event)"

            id="dropBox"

        ></div>

        <script>

        //event事件对象，事件绑定在谁身上就是谁

        var log = console.log;

        function dragStart(event){

            //开始拖动时触发，事件对象是拖动元素本身

            log(`dragStart`,event)

        }

        function drag(event){

            //拖动中触发 ondrag事件每350毫秒触发一次

            //log('drag',event)

        }

        function dragEnd(event){

            //拖动结束时触发

            log('dragEnd',event)

        }

        function dragEnter(event){

            //拖动的元素进入放置的目标时触发, 事件对象是目标元素

            log('dragEnter',event)

        }

        function dragLeave(event){

            //离开时触发

            log('dragLeave',event)

        }

        function dragOver(event){

            event.preventDefault();

            //log('dragOver',event)

        }

        function drop(event){

            event.preventDefault();

            log('drop',event)

            var p = document.querySelector('#p');

            var dropBox = document.querySelector('#dropBox');

            dropBox.appendChild(p)

        }

        </script>

    </body>

</html>

H5拖动事件复习的更多相关文章

  1. H5 拖放事件详解

    拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...

  2. H5拖动火狐自动打开新标签

    写在前面的话:<H5拖动火狐自动打开新标签>原因是为什么百度很多了我就不细说,本文章只说我自己的解决方法... 自定义数据里写个链接,如果火狐自动打开就跳到这个链接 这个页面就写一句话:关 ...

  3. js(鼠标键盘拖动事件)

    拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...

  4. Android开发 ---基本UI组件4：拖动事件、评分进度条、圆圈式进度条、进度条控制

    Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...

  5. Android长按及拖动事件探究

    Android中长按拖动还是比较常见的.比如Launcher中的图标拖动及屏幕切换,ListView中item顺序的改变,新闻类App中新闻类别的顺序改变等.下面就这个事件做一下分析. 就目前而言,A ...

  6. H5拖动实现代码

    原理以后有空再说现在嘛先上代码.... ;} html,body { width: 100%; height: 100%; ; } #dragBoxContainer{ width: 150px; p ...

  7. JS =>处理单击事件与拖动事件并存

    使用click事件,很难确定在拖动开始和结束的时候触发,所以使用了onmouseup(释放鼠标的时候),释放鼠标的时候,即在拖动还未结束,但是准备处理的阶段,此时mouseButtonFlag按照逻辑 ...

  8. H5 DeviceMotionEvent 事件制作“摇一摇效果”

    摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件 先讲怎么使用,具体的原理在后边补充 第一步:捕捉重力加速度 var acceleration = eventData.acce ...

  9. Android悬浮窗及其拖动事件

    主页面布局很简单,只有一个RelativelyLayout <?xml version="1.0" encoding="utf-8"?> <R ...

随机推荐

  1. c语言该怎么入门?C语言入门教程(非常详细)

    C语言是一门面向过程的编译型语言,它的运行速度极快,仅次于汇编语言.C语言是计算机产业的核心语言,操作系统.硬件驱动.关键组件.数据库等都离不开C语言:不学习C语言,就不能了解计算机底层. 这套「C语 ...

  2. php设计模式之策略模式实例代码

    html <html> <head> <meta charset="UTF-8"> <title>简单计算器</title&g ...

  3. 【网页浏览】国内伪P站搜图网站

    蛮好用的国内p站搜图网站(伪p站) 传送链接

  4. [CF1220C] Substring Game in the Lesson - 博弈论

    [CF1220C] Description 给定一个字符串 \(S\) , 同时维护一个区间 \([l,r]\) .轮流操作,每次可以扩展到一个新区间使得原区间是新区间的真子区间,并且字典序更小,不能 ...

  5. 在多租户（容器）数据库中如何创建PDB：方法1 从种子创建PDB

    基于版本:19c (12.2.0.3) AskScuti 创建方法:从零开始创建一个PDB(从PDB$SEED创建新的PDB) 对应路径:Creating a PDB --> Creating ...

  6. python3练习100题——009

    今天的题目好像有点水... 原题链接:http://www.runoob.com/python/python-exercise-example9.html 题目:暂停一秒输出. 我的代码: impor ...

  7. git免密拉取代码

    里介绍通过ssh公钥的方式免密拉取代码 以linux服务器为例,windows方式是一样的 1.用命令生成ssh key ssh-keygen -t rsa -C "xx@xxxcom&qu ...

  8. AcWing 799. 最长连续不重复子序列 双指针（一般先写一个朴素暴力的做法，然后看两个指针直接是否存在单调关系，如果存在，就想方法优化）

    https://www.acwing.com/problem/content/801/ #include<bits/stdc++.h> using namespace std ; int ...

  9. Codeforces补题2020.2.28（Round624 Div 3)

    A.Add Odd or Subtract Even 签到题~ #include<bits/stdc++.h> using namespace std; int T; int a,b; i ...

  10. day14 tar

    04. 系统中如何对文件进行压缩处理 压缩的命令 tar 压缩命令语法: tar zcvf /oldboy/oldboy.tar.gz 指定要压缩的数据文件 z 压缩的方式 为zip c 创建压缩包文 ...