<html>

    <meta charset="utf-8">

    <script>

    //规定被拖动的数据

    function tdwhat(ev,obj)

    {

        ev.dataTransfer.setData("text",ev.target.id);

        ev.dataTransfer.setData("myval",obj);

    }

    function tding(ev)

    {

        ev.preventDefault();

        var data=ev.dataTransfer.getData("text");

        var data1=ev.dataTransfer.getData("myval");

        ev.target.appendChild(document.getElementById(data));

        alert(data1);

    }

    function fxtd(ev)

    {

        ev.preventDefault();

    }

    </script>

    <body>

        <div id="t1" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;width:200px;height:100px;background:green;">

            <div id="f1" draggable="true" style="background:yellow;" ondragstart="tdwhat(event,'yellow')">

    被拖动块</div>

            <div id="f2" draggable="true" style="background:gray;" ondragstart="tdwhat(event,'gray')">

    被拖动块</div>

        </div>

        <div id="t2" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;width:200px;height:100px;background:red;">

        </div>

    </body>

</html>

HTML5来回拖动实例的更多相关文章

  1. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  2. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  3. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  4. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  5. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  7. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  9. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询

    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...

随机推荐

  1. knockout+bootstrap--一些复杂的应用合集

    一.针对My97日历控件的绑定 普通绑定和特殊格式绑定(红色部分) <!-- ko foreach: items --> <td class="ruyeeTableTDLa ...

  2. 安装 SQL Server 2008 时提示需要删除 SQL Server 2005 Express 工具

    已安装 SQL Server 2005,安装 SQL Server 2008 时提示需要删除 SQL Server 2005 Express 工具 错误提示:已安装 SQL Server 2005 E ...

  3. hbase基础-系统架构

    HBase 系统架构 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列 ...

  4. android-studio设置代理

    /home/{user}/.gradle/gradle.properties org.gradle.jvmargs=-Xmx1536m -DsocksProxyHost=127.0.0.1 -Dsoc ...

  5. 使用canvas编写环形图.

    原理使用canvas画图: 第一步:画一个大圆 第二部:画一个扇形 第三部:画一个小圆 相互叠加. 最终效果: 现在上代码: (function($){ $.fn.drawPic=function(o ...

  6. [转]Android使用WebView从相册/拍照中添加图片

    原地址:http://blog.csdn.net/djcken/article/details/46379929 解决这个问题花了很长时间搜索了解,网上大部分使用openFileChooser但都没解 ...

  7. selenium处理极验滑动验证码

    要爬取一个网站遇到了极验的验证码,这周都在想着怎么破解这个,网上搜了好多知乎上看到有人问了这问题https://www.zhihu.com/question/28833985,我按照这思路去大概实现了 ...

  8. 没想到cnblog也有月经贴，其实C#值不值钱不重要。

    呵呵,就不倚老卖老了,从basic走过来,一路经历vb,vf,delphi,C#,php,asp,html,js,css,太多太多的开发语言,包括面向对象编程思想,语义化页面结构等等,除了高级的编程技 ...

  9. 几种常见 容器 比较和分析 hashmap, map, vector, list ...hash table

    list支持快速的插入和删除,但是查找费时; vector支持快速的查找,但是插入费时. map查找的时间复杂度是对数的,这几乎是最快的,hash也是对数的.  如果我自己写,我也会用二叉检索树,它在 ...

  10. qt环境下Mapx组建的编程---------regoin

    #include "widget.h" #include "ui_widget.h" #include <QPushButton> #include ...