<!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. layui layer.open弹出框获取不了 input框的值

    layer.open({ title:'添加管理员', type: 1, content: $('.add_html').html(), btn:['添加', '取消'], btnAlign:'c', ...

  2. eNSP——利用单臂路由实现VLAN间路由

    原理: 以太网中,通常会使用VLAN技术隔离二层广播域来减少广播的影响,并增强网络的安全性和可管理性.其缺点是同时也严格地隔离了不同VLAN之间的任何二层流量,使分属于不同VLAN的用户不能直接互相通 ...

  3. ajax head带参数两次请求

    ajax请求head里带数据 客户端先发一次option看看能不能登录,然后再发一次post

  4. [CF429E]Points ans Segments_欧拉回路

    Points and Segments 题目链接:www.codeforces.com/contest/429/problem/E 注释:略. 题解: 先离散化. 发现每个位置如果被偶数条线段覆盖的话 ...

  5. 浅谈>/dev/null 2>&1

    在crond计划任务.nohup中我们经常可以看到>/dev/null 2>&1,但是很多人并不理解其含义,想要真正的理解它,首先我们需要知道文件描述符的三种类型. 类型 文件描述 ...

  6. SQL Server事务(二)

    事务的四大特性: 1.原子性:原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,这和前面两篇博客介绍事务的功能是一样的概念,因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则不能 ...

  7. 列表推导：python2和python3中作用域的问题

    python2中: x = 'my love' dummy = [x for x in 'ABC'] print x 此时x打印为:'C' python3中: x = 'my love' dummy ...

  8. Java多线程（十）：BlockingQueue实现生产者消费者模型

    BlockingQueue BlockingQueue.解决了多线程中,如何高效安全"传输"数据的问题.程序员无需关心什么时候阻塞线程,什么时候唤醒线程,该唤醒哪个线程. 方法介绍 ...

  9. 电脑串口（com）被占用问题

    最近使用串口与设备通信. 这个电脑一个有6个COM口,都要使用. 还有自带一个华为的4G通信模块,这个模块需要虚拟出4个COM口. 使用之前的Gost系统(只有1个物理COM版本的),导致物理COM口 ...

  10. 2.JVM、JRE、JDK之间的关系

    诠释一. JDK(java development kit) JDK是Java开发工具包,是整个Java的核心,包括了Java运行环境JRE.Java工具和Java基础类库. JRE(java run ...