<!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. 51Nod1526 分配笔名

    分析 在trie树上贪心,将所有串加入trie树中,在深度较深的地方匹配会更优. 由于只需要知道最后的总质量,所以直接取每个点的子树中最大的匹配即可 复杂度\(O(\sum len)\) 加串的时候把 ...

  2. php header运用细节

    http://www.111cn.net/phper/php-function/55872.htm http://blog.sina.com.cn/s/blog_7298f36f01011dxv.ht ...

  3. java 多线程之 线程优先级和守护线程

    线程优先级的介绍 java 中的线程优先级的范围是1-10,默认的优先级是5."高优先级线程"会优先于"低优先级线程"执行. java 中有两种线程:用户线程和 ...

  4. node V8 的垃圾回收机制

    将变量设置为null意味着切断变量与它此前引用的值之间的连接.当垃圾收集器下次运行时,就会删除这些值并回收它们占用的内存.

  5. WinForm下ComboBox设定SelectedValue总结 (SelectedValue==null解决办法)[转]

    http://www.cnblogs.com/qqflying/archive/2013/05/23/3096050.html 实践发现:以SelectedIndex赋值让ComboBox自动选中时能 ...

  6. 关于hadoop集群管理系统搭建的规划说明

    Hadoop集群管理系统搭建是每个入门级新手都非常头疼的事情,因为你可能花费了很久的时间在搭建运行环境,最终却不知道什么原因无法创建成功.但对新手来说,运行环境搭建不成功的概率还蛮高的. 在之前的分享 ...

  7. php设计模式之职责链模式

    <?php /** * @desc php设计模式之职责链模式(责任链模式) 定义:顾名思义,责任链模式为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这 ...

  8. 获取post发送过来的xml包

     if (Request.HttpMethod.ToLower() == "post") { byte[] ar; ar = new byte[this.Request.Input ...

  9. 关于Spring IOC (DI-依赖注入)

    <Spring入门经典>这本书无论对于初学者或者有经验的工程师还是很值一看的,最近花了点时间回顾了Spring的内容,在此顺带记录一下,本篇主要与spring IOC相关 ,这篇博文适合初 ...

  10. php 内容插入数据库需要mysql_escape_string处理一下 展示内容时候用htmlentities

    php 内容插入数据库需要mysql_escape_string处理一下 mysql_escape_string (PHP 4 >= 4.0.3, PHP 5, 注意:在PHP5.3中已经弃用这 ...