<!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. day40 python MySQL【四】 之 【索引】【视图】【触发器】【存储过程】【函数】

    MySQL[四] 之 [索引][视图][触发器][存储过程][函数]   1.索引 索引相当于图书的目录,可以帮助用户快速的找到需要的内容. 数据库利用各种各样的快速定位技术,能够大大提高查询效率.特 ...

  2. 【转】每天一个linux命令（39）：grep 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/17/2821195.html Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表 ...

  3. winform 程序调用及参数调用

    调用程序: // 新轮廓 -> 调用轮廓扫描程序        private void toolStripMenuItem9_Click(object sender, EventArgs e) ...

  4. 51nod 1673 树有几多愁——虚树+状压DP

    题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1673 建一个虚树. 一种贪心的想法是把较小的值填到叶子上,这样一个小值限制到的 ...

  5. 4G的添加

    (ZTE 中兴 ME3760_V2 ) 1. 复制myLte文件到相关目录,设置权限为755 2.修改openwrt1407/package/base-files/files/etc/rc.local ...

  6. 百度地图JavaScript如何清除指定类型的覆盖物

    由于一个地图中有很多种类型的覆盖物,由于某个覆盖物(一般是自定义)整个地图中只允许出现一次 那第一想到的就是,每次创建这个类型的覆盖物时先清除这一类型的覆盖物,比较简单判断覆盖物的类型 instanc ...

  7. C#.net 微信公众账号接口开发

    微信越来越火,微信公众平台成为开发成新宠,本文用C#.net开发微信公众信号接口. 微信接口地址代码: weixin _wx = new weixin(); string postStr = &quo ...

  8. js的自定义事件

    js中的事件是js的一大技术点,说白了就是操作dom树的唯一途径. 关于事件无非两种绑定方式: document.getElementById('xxx').onclick = function(){ ...

  9. a标签不用点击模拟跳转url。

    因为请求到数据前要判断用户是否是登录状态, 所以就想页面数据请求成功,就跳转到登录页面, 就用了location.href = url. 结果因为同源策略不能访问, 没想到a标签竟然可以直接跳转这个U ...

  10. bzoj4928: 第二题

    Description 对于一棵有根树,定义一个点u的k-子树为u的子树中距离u不超过k的部分. 注意,假如u的子树中不存在距离u为k的点,则u的k-子树是不存在的. 定义两棵子树是相同的,当且仅当不 ...