关键词：

1. draggable：规定元素是否可拖动的，draggable=true可拖动

2. dataTransfer：拖拽对象用来传递的媒介，使用方式：event.dataTransfer

3. ondragstart：拖拽元素被拖拽时触发的事件，作用于被拖拽元素

4. ondragenter：拖拽元素进入目标元素时触发的事件，作用于目标元素

5. ondragover：拖拽元素在目标元素移动触发的事件，作用于目标元素

6. ondrop：拖拽的元素在目标元素上同时鼠标放开触发的事件，作用于目标元素上

7. ondragend：拖拽完成后触发的事件，作用于被拖拽元素上

实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>拖拽</title>

    <style type="text/css">

        #rectangle {width:350px;height:70px;padding:10px;border:1px solid #000;}

    </style>

</head>

<body>

<div id="rectangle"></div>

<p id="word" draggable="true">这是一段可移动的段落，请把该段落拖入上面的矩形进行测试</p>

<script type="text/javascript">

    let rectangle = document.getElementById('rectangle'),

        word =  document.getElementById('word');

    word.ondragstart = (e) => {

        e.dataTransfer.setData("Text",e.target.id);

    };

    rectangle.ondragenter = (e) => {

        word.style.color = '#e1453c';

    };

　　 
　　//ev.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
此时需要用用document的ondragover事件把它直接干掉。
    rectangle.ondragover = (e) => {

        e.preventDefault();

    };

    rectangle.ondrop = (e) => {

        let data=e.dataTransfer.getData("Text");

        e.target.appendChild(document.getElementById(data));

        e.preventDefault();

    };

    word.ondragend = (e) => {

        document.getElementById('word').style.color = '#3cf078';

    };

</script>

</body>

</html>

HTML5 drag & drop 拖拽与拖放的更多相关文章

  1. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  2. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

  3. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  4. HTML5中的拖拽与拖放(drag&&drop)

    1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...

  5. html5 drag 文件拖拽浅淡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  7. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  8. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  9. HTML5 drag & drop & H5 DnD

    HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...

随机推荐

  1. flutter实现（OutlineButton）线框按钮

    在flutter的控件里 常用按钮有:FlatButton,RaisedButton,FloatingActionButton,OutlineButton. FlatButton是扁平的,没有阴影的. ...

  2. Android smartimageview网络图片查看器

    调用代码: SmartImageView siv = (SmartImageView) findViewById(R.id.siv);siv.setImageUrl(et_path.getText() ...

  3. eclipse使用git命令行

    idea自带git命令,可以很方便的进行提交代码.eclipse怎么做呢,下面我简单操作一下: 第一步: 第二步: 第三步: 这样就调出来git提交的命令窗口了: 运行成功如下: 注意: git的安装 ...

  4. USTCCourseCommunity 项目介绍

    我们的项目名为USTCCourseCommunity,科大课程社区,主要提供课表管理.课程资源管理.课程信息管理.智能排课.轻松评课等方面的服务,旨在为科大师生提供便捷. 科大现有课程服务形式存在的问 ...

  5. [翻译] 扩张卷积 (Dilated Convolution)

    英文原文: Dilated Convolution 简单来说,扩张卷积只是运用卷积到一个指定间隔的输入．按照这个定义,给定我们的输入是一个2维图片,扩张率 k=1 是通常的卷积,k=2 的意思是每个输 ...

  6. JQuery-学习。

    jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作.由约翰·雷西格(John Resig)在2006年1月的BarCamp NYC上发布第一个版本.目前是 ...

  7. HAproxy simple

    下载地址 start install: wget     http://www.haproxy.org/download/1.7/src/haproxy-1.7.5.tar.gz tar   -xf  ...

  8. Linux 系统常见命令功能大全_【all】

    Linux常见快捷键(6个) ctrl + u:剪贴光标前面 ctrl + k:剪贴光标后面 ctrl + y:粘贴 ctrl + r:查找命令 ctrl + insert:复制 shift+ ins ...

  9. Linux 环境部署记录（一） - 基础设定

    时间设置 查看系统当前日期/时间: date -R 查看系统硬件时钟: hwclock --show 设置硬件时间: hwclock --set --date="07/18/17 20:55 ...

  10. Shell中, 退出整个脚本

    常规做法 cat >test.sh<<EOF'' #!/bin/bash exit_script(){ exit 1 } echo "before exit" e ...