1. <html>
  2.     <meta charset="utf-8">
  3.     <script>
  4.     //规定被拖动的数据
  5.     function tdwhat(ev,obj)
  6.     {
  7.         ev.dataTransfer.setData("text",ev.target.id);
  8.         ev.dataTransfer.setData("myval",obj);
  9.     }
  10.     function tding(ev)
  11.     {
  12.         ev.preventDefault();
  13.         var data=ev.dataTransfer.getData("text");
  14.         var data1=ev.dataTransfer.getData("myval");
  15.         ev.target.appendChild(document.getElementById(data));
  16.         alert(data1);
  17.     }
  18.     function fxtd(ev)
  19.     {
  20.         ev.preventDefault();
  21.     }
  22.     </script>
  23.     <body>
  24.         <div id="t1" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;width:200px;height:100px;background:green;">
  25.             <div id="f1" draggable="true" style="background:yellow;" ondragstart="tdwhat(event,'yellow')">
  26.     被拖动块</div>
  27.             <div id="f2" draggable="true" style="background:gray;" ondragstart="tdwhat(event,'gray')">
  28.     被拖动块</div>
  29.         </div>
  30.         <div id="t2" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;width:200px;height:100px;background:red;">
  31.         </div>
  32.     </body>
  33. </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. linux 1-100的累加

    [   ]   判断式.它的使用和test命令一样 [ ]的判断符,只会返回2种值.0(真) 非0(假) -gt 大于-lt 小于-eq 等于-ne 不等于-ge 大于等于-le 小于等于 while ...

  2. ILGenerator.Emit动态 MSIL编程(一)之基础

    首先在Framework中,Emit相关的类基本都存在于System.Reflection.Emit命名空间下.可见Emit是作为反射的一个元素存在的. Emit能够实现什么?为什么要学习Emit?首 ...

  3. [Linux] -Docker修改空间大小

    Docker默认空间大小分为两个,一个是池空间大小,另一个是容器空间大小. 池空间大小默认为:100G 容器空间大小默认为是:10G 所以修改空间大小也分为两个: 这里使用centos下的yum进行安 ...

  4. VR外包团队：长年承接VR虚拟现实外包（应用、游戏、视频、漫游等）

    北京动点飞扬软件,从事外包业务五年,长年承接全景VR视频,全景普通视频外包. 以下是全景VR视频案例(可操作,人不动景物不动,人移动,景物跟随) 欢迎联系我们QQ:372900288 TEL:1391 ...

  5. Lua学习----Lua基础数据类型

    前言 Lua有6中数据类型,分别是nil(空).boolean(布尔).number(数字).string(字符).table(表).function(函数) 在Lua中可以使用type函数来返回一个 ...

  6. AngularJS的MVC中C的实现

    Angular的MVC中C的实现 注:在controller操作Dom效率是很低的,我们使用封装的指令去操作Dom

  7. PHP手机，邮箱正则匹配

    /*此处用于验证手机*/ $phone_preg = '/^1[3|4|5|7|8]\d{9}$/'; $email_preg = '/^[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+) ...

  8. SQL Server替换特殊字符

    1.查找特殊字符的ASCII码,在这里当然能够看到这个特出字符的模样,可用函数取出这个特殊字符进行复制,下面的取值为9 Select ascii(' ') 2.根据ASCII码值替换特殊字符 Upda ...

  9. android 学习第一天 了解事件机制，页面跳转等常用操作

    点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...

  10. Dialog_ _dialog系统样式讲解 及 透明背景

    AlertDialog.Builder builder = new AlertDialog.Builder(DialogActivity.this,AlertDialog.THEME_TRADITIO ...