<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div1,#div2{width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;text-align: center;}

        #div2{margin-top: 50px;}

        div img{

            height: 130px;

        }

    </style>

</head>

<body>

    <div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)">

        <!--为了让元素可拖动，设置 draggable='true'-->

        <img src="http://img.hb.aicdn.com/e0ecf0d449916dd1c762899facf51f782769b1c310b7c-bDfMIu_fw658" draggable="true" ondragstart="drag(event)" id='dra'/>

    </div>

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

</body>

<script>

    //ondragover-- 在拖动的时候阻止浏览器默认事件

    function allowDrop(ev){

        ev.preventDefault();

    }

    function allowDrop1(ev){

        ev.preventDefault();

    }

    //ondragstart  拖动开始的时候触发该事件

    function drag(e){

        //dataTransfer.setData() 方法设置被拖数据的数据类型和值：

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

        //数据类型是 "Text"，值是可拖动元素的 id ("dra")。

    }

    //  ondrop 拖动完成放置在该元素中的时候除非该事件

    function drop(e){

        var data= e.dataTransfer.getData('Text');//---接收数据

        e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域

        e.preventDefault();

    }

    function drop1(e){

        var data= e.dataTransfer.getData('Text');//---接收数据

        e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域

        e.preventDefault();

    }

</script>

</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. vault 集群搭建（active standby 模式)

        参考架构图: consul server cluster 搭建 consul 基本配置格式 { "server": true, "node_name": ...

  2. log4net保存到数据库系列二：独立配置文件中配置log4net

    园子里面有很多关于log4net保存到数据库的帖子,但是要动手操作还是比较不易,从头开始学习log4net数据库日志一.WebConfig中配置log4net 一.WebConfig中配置log4ne ...

  3. IBM WebSphere MQ介绍安装以及配置服务详解(转)

    首先介绍一下MQ MQ消息队列的简称是一种应用程序对应用程序的通信方法.说白了也就是通过队列的方式来对应用程序进行数据通信.而无需专用链接来链接它们. MQ的通讯方式 1.数据报的方式 Datagra ...

  4. VPC/VM/VBOX安装GHOST版的无法启动系统

    本人最近在安装一些公司的虚拟机,方便开发使用,不用每次都安装几个小时的装机和安装软件,但是本次却遇到了一点问题,虚拟机安装完成后一直无法进入系统,只有一个光标在黑色的屏幕上一闪一闪的,也没有任何错误提 ...

  5. Oracle活动会话历史(ASH)及报告解读

    对于数据库运行期间的各种状态的实时监控以及相关性能数据捕获对于解决性能问题,提高整体业务系统运行效率是至关重要的.在Oracle数据库中,实时捕获相关性能数据是通过ASH工具来实现的.ASH通过每秒钟 ...

  6. Oracle根据表的大小排序SQL语句

    --按照数据行数排序select table_name,blocks,num_rows from dba_tables where owner not like '%SYS%' and table_n ...

  7. 【python】正则表达式-正则表达式常见的字符和符号表

    正则表达式常见的字符和符号表:

  8. PHP常用函数总结（二）：

    //=================图像处理=================================== //=================会话机制================== ...

  9. gdb 调试（设置变量）（六）

    一旦使用GDB挂上被调试程序,当程序运行起来后,你可以根据自己的调试思路来动态地在GDB中更改当前被调试程序的运行线路或是其变量的值,这个强大的功能能够让你更好的调试你的程序,比如,你可以在程序的一次 ...

  10. vmware linux NAT CON

    NAT上网 vmware设置nat上网: 1.设置本地可提供上网网卡为共享方式到vmware 8(NAT)如下图: 2.设置本地虚拟网卡vmware8 IP地址如下图: 3.设置vmware网络设置启 ...