<!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. C语言的灵魂——指针基础

    一.什么是指针 1.指针的定义:地址形象化为指针,通过指针能够找到内存单元. 指针变量就是地址变量,变量的值为指针. 指针其实是我们将变量名和地址的关系显化(独立)出来的一种形式,是为了我们更加方便的 ...

  2. c++学习笔记_5

    前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 继承 继 ...

  3. TensorFlow.ZC尝试

    1.资料: https://github.com/protocolbuffers/protobuf/releases https://pythonprogramming.net/introductio ...

  4. 前端JS之HTML利用XMLHttpRequest()和FormData()进行大文件分段上传

    用于网页向后端上传大文件 ### 前端代码<body> <input type="file" name="video" id="fi ...

  5. poj1222（高斯消元法解异或方程组+开关问题）

    题目链接:https://vjudge.net/problem/POJ-1222 题意:给定一个5×6的01矩阵,改变一个点的状态时它上下左右包括它自己的状态都会翻转,因为翻转2次等价与没有翻转,那么 ...

  6. url-pattern / 与/* 的区别

    其中/和/*的区别:< url-pattern>/</url-pattern> 会匹配到/login这样的路径型url 不会匹配到模式为*.jsp这样的后缀型url,即:*.j ...

  7. Oracle的查询-分页查询

    --Oracle中的分页 --rownum行号:当我们做select操作时候 --每查询出一行记录,就在该行加上一个行号 --行号从1开始,一次递增,不能跳着走 ----emp表工资倒叙排列后,每页5 ...

  8. 剑指offer35：数组中的逆序对

    1 题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%10 ...

  9. LC 94. Binary Tree Inorder Traversal

    问题描述 Given a binary tree, return the inorder traversal of its nodes' values. (左 - 根 - 右) Example: In ...

  10. Spring集成kafka，消费者运行时内存占用会一直增长

    Spring集成kafka,消费者运行时内存占用会一直增长? 20C 本人用Spring集成kafka消费者,发布运行时内存占用会一直升高,最后程序挂掉.请各位大神看看,提供解决方法 以下是我的配置文 ...