<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. ecmobile-ios笔记

    col或者row里的v-align:bottom会导致里面所有的元素都到bottom,如果有一个元素还好,多个元素,第一个会到底.

  2. Delphi、C C++、Visual Basic数据类型的对照 转

    Delphi.C C++.Visual  Basic数据类型的对照 变量类型 Delphi C/C++ Visual Basic 位有符号整数 ShortInt char -- 位无符号整数 Byte ...

  3. c#变量缺少using引用，如何快速加上using，加Using的快捷键[bubuko.com]

    在vs的“工具”->“选项”中,左侧树形菜单,“环境”下的“键盘”中设置快捷键. 在“显示命令包含”输入框内输入“显示智能标记”,找到“视图.显示智能标记”,可以看到该命令的快捷键已经分配了2个 ...

  4. ListView 重设Adapter后的动作，remove/add ListView 的动作

    Adapter adapter1 //设置adapter1,会创建屏幕可见多个的ItemView ListView.setAdapter(adapter1); //设置adapter为null,则上面 ...

  5. org.apache.catalina.LifecycleException tomcat 启动 maven 处处都是坑！！！

    问题1:tomcat不识别maven工程解决办法:project右击->Properties->Project Facets,选择Dynamic Web Module及其版本(tomcat ...

  6. log4net 配置

    1.是直接在代码中通过调用XmlConfigurator.Configure()来解析配置文件,配置日志环境. log4net.Config.XmlConfigurator.Configure(); ...

  7. PL/SQLDeveloper导入导出Oracle数据库方法

    前一篇博客介绍了Navicat工具备份Oracle的方法,这篇博客介绍一下使用PL/SQL Developer工具导入导出Oracle数据库的方法. PL/SQL Developer是Oracle数据 ...

  8. WindowsFormsHost使用问题

    WindowsFormsHost使用问题 WPF WindowsFormsHost 类 允许在 WPF 页面上承载 Windows Forms控件的元素. 命名空间:  System.Windows. ...

  9. Django 之 查看执行的sql语句

    前提: 我的app名称为core,models.py内容如下: # coding:utf-8 from django.db import models # Create your models her ...

  10. SQL Server 树形表非循环递归查询

    很多人可能想要查询整个树形表关联的内容都会通过循环递归来查...事实上在微软在SQL2005或以上版本就能用别的语法进行查询,下面是示例.   --通过子节点查询父节点WITH  TREE AS(  ...