<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. React - redux, jsx中写js示例

    { this.state.avatarSource === null ? <Text>Select a Photo</Text> : <Image style={styl ...

  2. jquery中ajax在firefox浏览器下“object XMLDocument”返回结果的解决办法

    asp.net中借助jquery的ajax处理功能,使用起来很方便.但是在firefox下获得的data报错object XMLDocument.这是因为默认的情况下把datatype用html来解析 ...

  3. PHP MYSQL单向同步方案

    项目上有个需求,需要从外网服务器的MYSQL同步到本地服务器上. 思路如下: 1 在外网MYSQL中创建表 table_change_log ,记录表中数据的更改记录. DROP TABLE IF E ...

  4. kubernetes多节点部署解析

    注:以下操作均基于centos7系统. 安装ansible ansilbe可以通过yum或者pip安装,由于kubernetes-ansible用到了密码,故而还需要安装sshpass: pip in ...

  5. CFDebug.template

    { "AWSTemplateFormatVersion" : "2010-09-09", "Description" : "Cre ...

  6. css3基础、（弹性、响应式）布局注意点

    E1>E2选择父元素为E元素的所有E2元素(子类选择器) E1+E2选择元素为E1之后的所有E2元素(兄弟选择器) E[attr]只使用属性名,但没有确定任何属性值 E[attr="v ...

  7. HDU 1789 Doing Homework again(贪心)

    Doing Homework again 这只是一道简单的贪心,但想不到的话,真的好难,我就想不到,最后还是看的题解 [题目链接]Doing Homework again [题目类型]贪心 & ...

  8. ubuntu 安装redis两种方式 教程

    方式一: 下载地址:http://redis.io/download,下载最新文档版本. 本教程使用的最新文档版本为 2.8.17,下载并安装: $ wget http://download.redi ...

  9. Stanford NLP 学习笔记2：文本处理基础（text processing）

    I. 正则表达式(regular expression) 正则表达式是专门处理文本字符串的正式语言(这个是基础中的基础,就不再详细叙述,不了解的可以看这里). ^(在字符前): 负选择,匹配除括号以外 ...

  10. VMware下安装Linux系统，ORACLE软件，DBCA建库

    操作系统安装   在vmware下安装Linux (OEL5.6),用于数据库服务器 1.打开vmware,选择"创建新的虚拟机"       2.选择自定义安装   3.选择虚拟 ...