<!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. 2.x ESL第二章习题2.4

    题目 准备 $x_i\sim N(0,1)$,有$\sum_i^n x_i^2 \sim \chi^2(n)$其中$n$称为自由度,卡方分布的均值即其自由度 $x_i\sim N(\mu_i,\sig ...

  2. bat命令学习笔记

    1.一般在开始声明 setlocal enabledelayedexpansion 设置本地为延迟扩展.其实也就是:延迟变量,全称延迟环境变量扩展,使得批处理能够感知到变量的动态变化,在运行过程中给变 ...

  3. Stopwatch 和TimeSpan介绍【转】

    1.使用 Stopwatch 类 (System.Diagnostics.Stopwatch) Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 S ...

  4. [poj 1144]Network[Tarjan求割点]

    题意: 求一个图的割点. 输入略特别: 先输入图中点的总数, 接下来每一行首先给出一个点u, 之后给出一系列与这个点相连的点(个数不定). 行数也不定, 用0作为终止. 这样的输入还是要保证以数字读入 ...

  5. eclipse开发c++时cout和endl报错

    1.Symbol 'cout' could not be resolved  , 选择kepler版本号就不报错了. 2. 下载gdb, ./configure make sudo make inst ...

  6. Hibernate征途（二）之基础与核心

    根据我司优良传统,必然要由上向下.逐级深入,所以在钻到Hibernate细节之前,先从宏观上行欣赏一下Hibernate.为什么说是欣赏?大家可以自行查阅一下Hibernate知识外的信息,创始人和H ...

  7. linux-FTP服务常用命令及测试

    一.vsftpd服务的安装,启动及关闭1.安装vsftpd[root@rusky bdump]# yum install vsftpd --必须配置yum源才能使用yum命令来安装vsftpd,或者挂 ...

  8. 集合框架-TreeSet

    TreeSet是Set集合的常见子类. TreeSet:底层结构是 二叉树 元素是有排序的,但是不可以有重复元素. 相关代码演练: /* TreeSet ;元素是有序的,但是不可以元素重复. */ i ...

  9. Mvc5+Entity Framework6 之二----在MVC中用Entity Framework实现基本的CRUD

    目标:创建控制器和视图的代码,实现CRUD(创建,读取,更新,删除)功能 创建一个详细信息页 控制器为Students的Index页生成的代码排除Enrollments属性在外,因为该属性中关联着一个 ...

  10. HDU 1033 - Edge

    题目很水 然翻译感人 顺时针或者逆时针走,输出坐标 #include <iostream> using namespace std; ]; int p; ]={,,,-,}; ]={,,- ...