<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. MySQL Innodb数据库性能实践——热点数据性能

    摘要: 对于大部分的应用来说,都存在热点数据的访问,即:某些数据在一定时间内的访问频率要远远高于其它数据. 常见的热点数据有“最新的新闻”.“最热门的新闻”.“下载量最大”的电影等. 为了了解MySQ ...

  2. HelloWorld！

            爪哇岛上程序猿,5载忙忙未等闲, 醉里挑灯秒登VPN解决Bug,梦里手撕产品战PM:             但行好事,莫问前程,      泰山崩于前,我依然沐浴更衣焚香沏茶:   ...

  3. ruby 生成有条件限制的随机数

    #conding:utf-8 #生成只有数字的随机码可控制长度def random_int(len) newpass = "" 1.upto(len){ |i| newpass & ...

  4. javascript的一点学习

    最近用vue.js用的很爽,在全栈开发的路上一路狂奔,发现后台跟前台一起确实更有意义. 记录一个比较有意思的bug: 目标是对一个全局的paramList进行json格式化显示.代码借鉴了 http: ...

  5. 从click事件理解DOM事件流

    事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...

  6. Blink Without Delay: 不使用 delay() 函数而使 LED 闪烁

    不使用 delay() 函数而使 LED 闪烁 有些时候你需要同时做两件事.例如,你可能希望在读取按键按下状态同时让LED闪烁. 在这种情况下,你不能使用 delay(),因为Arduino程序会在d ...

  7. git的基础介绍和使用

    git工作原理 git的工作原理还是比较简单的,当我们创建了本地代码仓库后,会在本地代码仓库的根目录中生成一个.git的隐藏文件. .git为一个文件目录,又叫做版本库.在本地代码仓库文件夹中,除.g ...

  8. NOIP201307货车运输

    2016.1.28 试题描述 A 国有n座城市,编号从1到n,城市之间有m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有q辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的情况下,最多 ...

  9. android .apk安装时遇到NSTALL_FAILED_CONTAINER_ERROR错误

    在一台酷派上装apk时遇到问题: android Installation error: INSTALL_FAILED_CONTAINER_ERROR 遇到问题后baidu google修改为andr ...

  10. ASP.net 中手工调用WS(POST方式)

    ASP.net 中手工调用WS(POST方式)核心代码:string strUrl="http://localhost:21695/service1.asmx/getmythmod" ...