1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         #div1,#div2{width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;text-align: center;}
  8.         #div2{margin-top: 50px;}
  9.         div img{
  10.             height: 130px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)">
  16.         <!--为了让元素可拖动，设置 draggable='true'-->
  17.         <img src="http://img.hb.aicdn.com/e0ecf0d449916dd1c762899facf51f782769b1c310b7c-bDfMIu_fw658" draggable="true" ondragstart="drag(event)" id='dra'/>
  18.     </div>
  19.     <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  20. </body>
  21. <script>
  22.     //ondragover-- 在拖动的时候阻止浏览器默认事件
  23.     function allowDrop(ev){
  24.         ev.preventDefault();
  25.     }
  26.     function allowDrop1(ev){
  27.         ev.preventDefault();
  28.     }
  29.     //ondragstart  拖动开始的时候触发该事件
  30.     function drag(e){
  31.         //dataTransfer.setData() 方法设置被拖数据的数据类型和值：
  32.         e.dataTransfer.setData("Text",e.target.id);
  33.         //数据类型是 "Text"，值是可拖动元素的 id ("dra")。
  34.     }
  35.  
  36.     //  ondrop 拖动完成放置在该元素中的时候除非该事件
  37.     function drop(e){
  38.         var data= e.dataTransfer.getData('Text');//---接收数据
  39.         e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
  40.         e.preventDefault();
  41.     }
  42.     function drop1(e){
  43.         var data= e.dataTransfer.getData('Text');//---接收数据
  44.         e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
  45.         e.preventDefault();
  46.     }
  47. </script>
  48. </html>

HTML5拖动的更多相关文章

  1. HTML5 拖动

    触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...

  2. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  3. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...

  4. html5拖动滑块

    html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...

  5. HTML5拖动画布/拖放

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  6. html5拖动监听

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

  7. HTML5学习笔记

    参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> ...

  8. html5 “拖放”

    拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...

  9. HTML实现文件拖动上传

    在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...

随机推荐

  1. Linux 'XXXXXX' "is not in the sudoers file. This incident will be reported" 解决方法

    添加方法如下: 1.进入root模式su -  注意:su和-之间有空格输入当前用户的密码 2.添加写权限chmod u+w /etc/sudoers 3.将自己加入到sudoers中 gedit / ...

  2. Android已有的原生Camera框架中加入自己的API的实现方案。

    版权声明:本文为CSDN博主(天才2012)原创文章.未经博主同意不得转载. https://blog.csdn.net/gzzaigcn/article/details/25707389     在 ...

  3. c#代码获取web.config配置文件里面设置的 <compilation debug="true"节点

    == 在我们的web.config文件中,有像下面的这样的一个配置, <system.web> <identity impersonate="true" user ...

  4. 环境搭建之JAVA项目部署步骤

    一.配置java环境 1.linux下安装jdk,在此处安装1.7_x64的jdk,解压缩  tar -zxvf xxxxxxx 2.将jdk移动到/usr下 mv java /user/ 3.配置环 ...

  5. mysql explicit_defaults_for_timestamp参数

    在mysql中:- timestamp列如果没有显式定义为null,默认会被设置为not null属性.(其它的数据类型如果没有显式定义为not null,默认是可以为null的).设置timesta ...

  6. python下爬某个网页的图片

    #coding=utf-8 import re import urllib def getHtml(url): #获取url对应得源码 page = urllib.urlopen(url) html ...

  7. asp.net后台正则表达式验证手机号码邮箱

    //如果文本中可以为空的为NO,文本中内容不为空 if (input.nullable == "no" || !isnull(input.value)) { //文本中值的类型 s ...

  8. 关于lidroid xUtils 开源项目

    最近搜了一些框架供初学者学习,比较了一下XUtils是目前git上比较活跃 功能比较完善的一个框架,是基于afinal开发的,比afinal稳定性提高了不少,下面是介绍: xUtils简介 xUtil ...

  9. java操作Excel之POI（6）使用POI实现使用模板批量添加数据

    action是用struts2写的:前端界面easyUI写的, 前端: <!DOCTYPE html> <html> <head> <meta charset ...

  10. R语言学习——向量，矩阵

    在R中,基本的数据结构有:向量,矩阵,数组,数据框,列表,因子,函数等. 向量:一系列同类型的有序元素构成. 向量是一维结构. 向量是R最简单的数据结构,在R中没有标量. 标量被看成1个元素的向量. ...