<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. kafka单节点测试

    ======================命令====================== 启动zookeeper server bin/zookeeper-server-start.sh conf ...

  2. cxxnet在windows下配置遇到的问题

    I compiled the dmlc-core and rabbit. When I compile the new version of CXXNET, there are compile err ...

  3. 中文字符串转换为十六进制Unicode编码字符串

    package my.unicode; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Uni ...

  4. STM32是否可以跑linux

    操作系统有两种 用MMU的 和 不用MMU的用MMU的是Windows MacOS Linux Android不用MMU的是FreeRTOS VxWorks ucOS... CPU有两种 带MMU的 ...

  5. du 使用详解 linux查看目录大小 linux统计目录大小并排序 查看目录下所有一级子目录文件夹大小 du -h --max-depth=1 |grep [

    常用命令 du -h --max-depth=1 |grep [TG] |sort   #查找上G和T的目录并排序 du -sh    #统计当前目录的大小,以直观方式展现 du -h --max-d ...

  6. RT-Thread下的串口驱动程序分析【转载】

    编写本文稿的目的,在于通过分析stm32平台上的串口中断源码,学习 RTT中如何编写中断处理程序 如何编写RTT设备驱动接口代码 了解串行设备的常见处理机制 先以RTT官方源码中的STM32 BSP包 ...

  7. 黄聪：GeckoFX如何引用jquery文件并执行自定义JS

    var jquery_script = gwb.Document.CreateElement("script"); jquery_script.SetAttribute(" ...

  8. ajax的两种方式

    get:var ajax=new XMLHttpRequest();ajax.open('get','__URL__/check_all?val='+check);ajax.send();ajax.o ...

  9. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  10. java 无符号byte转换

    java中的byte类型是有符号的,值得范围是-128-127 做网络通讯时,接收过来的数据往往都是无符号的byte,值得范围是0-255 因此直接转换时,存储到java显示的值就会有问题 int o ...