<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>拖放</title>

     <style>

         #div1{

             width: 300px;

             height: 300px;

             border: 1px solid #aaabbb;

         }

     </style>

     <script>

         function allowDrop(ev){

             ev.preventDefault();

         }

         function drag(ev){

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

         }

         function drop(ev){

             ev.preventDefault();

             var data=ev.dataTransfer.getData("Text");

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

         }

     </script>

 </head>

 <body>

     <p>请拖动图片</p>

     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

     </div>

     <img id="drag1" src="data:images/1.png" draggable="true" ondragstart="drag(event)">

 </body>

 </html>

HTML5——3 HTML5拖放的更多相关文章

  1. HTML5 中的拖放

    今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...

  2. HTML5学习笔记 拖放

    拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...

  3. HTML5中的拖放

    关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...

  4. html5，html5教程

    html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

  5. HTML5之一HTML5简介

    1.什么是HTML5? HTML5是HTML的新一代标准.以前版本的HTML标准4.01发布于1999. 自1999年以后,web已经有了翻天覆地的变化. 实际上HTML5仍旧是开发中的一个标准.但是 ...

  6. HTML5新增的拖放API---（一）

    HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...

  7. HTML5新属性-----拖放

    最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...

  8. HTML5 CSS3 专题 : 拖放 （Drag and Drop）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...

  9. HTML5 学习05—— 拖放（Drag 和 Drop）

    拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...

  10. HTML5 实现文件拖放上传

    1. [图片] 5375acf5gw1dusqsscfksj.jpg ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" ...

随机推荐

  1. Official Program for CVPR 2015

    From:  http://www.pamitc.org/cvpr15/program.php Official Program for CVPR 2015 Monday, June 8 8:30am ...

  2. Python初始

    一,Python介绍 1.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间, ...

  3. HTML5页面如何在手机端浏览器调用相机、相册功能

    最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file"/& ...

  4. Go-环境搭建-hello world-变量常量定义-函数使用基础

    目录 编程语言科普 常见语言的背景 go 为什么这么火? 环境搭建(很重要) ide 编辑器 注释 第一个程序 Hello world! 编译与执行 变量类型 数字类型 字符串类型 布尔类型 常量 函 ...

  5. django 中静态文件项目加载问题

    问题描述: django项目中创建了多个app后,每个app中都有对应的static静态文件.整个项目运行时这些静态文件的加载就是一个问题,因为整个项目我只参与了一部分,项目部署之类的并没有参与.我写 ...

  6. 第一讲,DOS头文件格式

    今天讲解PE文件格式的DOS头文件格式 首先我们要理解,什么是文件格式,我们常说的EXE可执行程序,就是一个文件格式,那么我们要了解它里面到底存了什么内容 简短的说明. 我们要知道,PE文件格式,是微 ...

  7. QQ浏览器、搜狗浏览器等兼容模式下，Asp.NetCore下，Cookie、Session失效问题

    原文:QQ浏览器.搜狗浏览器等兼容模式下,Asp.NetCore下,Cookie.Session失效问题 这些狗日的浏览器在兼容模式下,保存Cookie会失败,是因为SameSiteMode默认为La ...

  8. BMP RGB888转RGB565 +上下翻转+缩放

      典型的BMP图像文件由四部分组成: (1) 位图头文件数据结构,它包含BMP图像文件的类型.文件大小和位图起始位置等信息: typedef struct tagBITMAPFILEHEADER { ...

  9. js中的函数提升和变量提升

    变量提升和函数提升: 就是将变量声明或者函数全部代码提升到当前作用域(全局作用域或函数作用域)最开始的部分. JavaScript中函数域为最小域范围:for循环.while循环.if语句.switc ...

  10. C++ STL 之 deque

    deque 和 vector 的最大差异? 一在于 deque 允许常数时间内对头端进行元素插入和删除操作. 二在于 deque 没有容量的概念,因为它是动态的以分段的连续空间组合而成,随时可以增加一 ...