<!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. 【BZOJ2558】Count on a tree

    又是因为傻逼错误浪费了半天时间 原题: 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个 ...

  2. 【mysql】mac上基于tar.gz包安装mysql服务

    一.准备工作 (1)下载mysql-5.7.21-macos10.13-x86_64.tar.gz,并将该压缩包移动至/usr/local目录下 (2)解压压缩包 二.安装 (1)将解压的包重命名为m ...

  3. USB设备驱动_WDS

    1. usb_alloc_dev中的 bus_type 中指定了匹配函数,和uevent中的环境参数. ====>不同的bus_type的匹配函数可能是不同的,uevent的环境变量参数也可能是 ...

  4. prisma 服务器端订阅试用

      graphql 协议是支持数据的实时订阅功能的(一般基于websocket 进行实现) prisma 支持客户端订阅以及服务器端订阅(类似webhook),可以方便将 数据推送后端服务 目的 pr ...

  5. ORA-01791: not a SELECTed expression

    Student表有3个字段:id,name,age 看这两个SQL语句 (1)select name from student order by id; (2)select distinct(name ...

  6. centos7.x网卡bond配置

    本文摘抄自 https://www.cnblogs.com/liwanggui/p/6807212.html centos7网卡bond配置 centos7网卡bond配置 1 备份网卡配置文件2 使 ...

  7. Oracle Supplemental 补全日志介绍

    转. Oracle补全日志(Supplemental logging)特性因其作用的不同可分为以下几种:最小(Minimal),支持所有字段(all),支持主键(primary key),支持唯一键( ...

  8. [转]StarWind模拟iSCSI设备

    StarWind模拟iSCSI设备 url: http://jimshu.blog.51cto.com/3171847/590412/  标签:职场 iSCSI 休闲 StarWind 原创作品,允许 ...

  9. 【Hibernate学习笔记-3】在Spring下整合Hibernate时， 关于sessionFactory的类型的说明

    摘要 在Spring下整合Hibernate时,关于sessionFactory的配置方式主要有两种,分别为注解配置方式,和xml配置方式,下面将对这两种配置方式进行介绍. 1. sessionFac ...

  10. 基于jQuery的表单操作

    1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪 ...