<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5拖放</title>

        <script type="text/javascript">

            function allowDrop(ev)

            {

                ev.preventDefault();//取消默认

            }

            function drag(ev)

            {

                //设置被拖数据的数据类型和值

                //数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

                ev.dataTransfer.setData("Text",ev.target.id);

            }

            //进行放置

            function drop(ev)

            {

                ev.preventDefault();

                var data=ev.dataTransfer.getData("Text");

                ev.target.appendChild(document.getElementById(data));

            }

        </script>

    </head>

    <body>

        <h1>元素拖放</h1>

        <br /><br /><br /><br />

        <p id="text1" draggable="true" ondragstart="drag(event)" >可以被拖动</p>

        <div id="panel1" style="width: 100px; height: 100px; border: black solid 1px;float: left;margin-left: 100px;" ondrop="drop(event)" ondragover="allowDrop(event)">拖进来啊1</div>

        <div id="panel2" style="width: 100px; height: 100px; border: black solid 1px;float: left;margin-left: 200px;" ondrop="drop(event)" ondragover="allowDrop(event)">拖进来啊2</div>

    </body>

</html>

HTML5 元素拖放的更多相关文章

  1. HTML5元素拖放设置总结

    将元素图片放入div盒子内 1.首先设置元素为可拖放:在img标签内加入draggable=”true”. <img draggable="true"> 2.设置元素的 ...

  2. html5实现本页面元素拖放和本地文件拖放

    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...

  3. html5如何实现元素拖放

    html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...

  4. HTML5原生拖放实例分析

    HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...

  5. HTML5元素标记释义

    HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...

  6. Selenium常用操作汇总二——如何把一个元素拖放到另一个元素里面(转)

    Q群里有时候会有人问,selenium  webdriver怎么实现把一个元素拖放到另一个元素里面.这一节总一下元素的拖放. 下面这个页面是一个演示拖放元素的页面,你可以把左右页面中的条目拖放到右边的 ...

  7. 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

  8. html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

    html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...

  9. html5.js让IE（包含IE6）支持HTML5元素方法

    原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...

随机推荐

  1. C++模板类中使用静态成员变量（例如Singleton模式）

    一个最简单Singleton的例子: ///////// Test.h /////////template <class _T>class CTest{private:_T n;stati ...

  2. axis2之webservice

    Axis2之webservice超详细教程 Axis2是一套崭新的WebService引擎,该版本是对Axis1.x重新设计的产物.Axis2不仅支持SOAP1.1和SOAP1.2,还集成了非常流行的 ...

  3. [Linux] rlwrap - 解决Linux下sqlplus退格、上翻键乱码问题

    在Linux下使用sqlplus你会发现:退格键无法正常使用(乱码),上翻键也无法正常显示历史功能,非常讨厌! 为了让退格键和上翻键在sqlplus里正常发挥它的作用,我们必须安装一个软件 - rlw ...

  4. STL集合容器set按照由小到大或者由大到小的顺序存放元素

    (1)由小到大 set<int,less<int>> M; M.insert(1960); M.insert(1952); M.insert(1771); M.insert(1 ...

  5. A Game with Colored Balls

    题目链接 题意: 给一个长度为n的字符串,每次删除字母同样切连续的串,假设有多个,删除最左边的.最长的串.每次删除输出串的字母,每一个字母的下标(1-n) N (1 ≤ N ≤ 106),串仅仅包含r ...

  6. ASP.NET之自定义异步HTTP处理程序(图文教程)

    前面我们学习了关于关于自定义同步HTTP处理程序,相信大家可能感觉有所成就,但是这种同步的机制只能对付客户访问较少的情况或者数据处理量不大的情况,而今天这篇文章就是解决同步HTTP处理程序的这个致命缺 ...

  7. LINQ 基本子句之一 （select/where/group/into)

    特别喜欢同事看到我写了一句小排序的时候说,他当然喜欢Linq了,虽然我只是baidu之,不知其然也不知其所以然. 基本格式 var<变量> = from <项目> in < ...

  8. Android学习之sqlite与listview

    在android系统中使用的是sqlite数据库,前面的简易登录系统已经讲述了数据库的应用.本例的重点是实现数据库与listview的绑定.demo的数据是将个人的信息绑定到listview中,并存在 ...

  9. C# 几种退出程序的方式

    C# WinForm程序退出的方法 1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application. ...

  10. windows不能在本地计算机启动SQL Server(MSSQLSERVER)

    windows不能在本地计算机启动sql server 在登录数据库的时候,发现数据库不能登录,提示[无法连接到实例],很明显这是因为数据库服务没有启动导致的,我们打开[服务]启动相应的SQL数据库服 ...