html5新的拖拽 只支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

来一个实例：

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

        table td{

            width:120px;

            height:50px;

            border:1px solid #;

        }

        table td div.dragDiv{

            margin:3px;

            border:1px solid #;

            padding:3px;

            cursor:pointer;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <td>

                <div class="dragDiv">我是要拖动的</div>

            </td>

            <td> </td>

            <td> </td>

            <td> </td>

            <td> </td>

        </tr><tr>

    <td>

        <div class="dragDiv">我是第二个</div>

    </td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

</tr>

    </table>

    <p>请把 W3School 的图片拖放到矩形中：</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <br />

    <img id="drag1" src="data:images/bigSwim7.png" draggable="true" ondragstart="drag(event)" />

    <script src="js/jquery-1.12.0.min.js"></script>

    <script type="text/javascript">

        //对表格中的DIV拖拽

        var tempData = "";

        $("table td div.dragDiv").each(function () {

            this.draggable = true;

            this.ondragstart = function (e) {

                if (this == e.target) {

                    e.dataTransfer.setData("id", e.target.innerHTML);

                    tempData = this;

                }

            }

        });

        $("table td").each(function () {

            this.ondragover = function (e) {

                e.preventDefault();

            }

            this.ondrop = function (e) {

                if (this == e.target) {

                    e.preventDefault();

                    e.target.appendChild(tempData);

                    tempData = "";

                }

            }

        })

        //图片拖拽

        function allowDrop(ev) {

            ev.preventDefault();

        }

        function drag(ev) {

            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>

</body>

</html>

html5 拖拽练习题的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  6. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

  9. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

随机推荐

  1. C# 面试题 （二）

    1. 什么是C#? C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言.C#是一种安全的.稳定的.简单的.优雅的,由C和C++衍生出来的面向对象的编程语言. ...

  2. Zookeeper原理和实战开发经典视频教程 百度云网盘下载

    Zookeeper原理和实战开发 经典视频教程 百度云网盘下载 资源下载地址:http://pan.baidu.com/s/1o7ZjPeM   密码:r5yf   

  3. BZOJ1968_COMMON约数研究_KEY

    题目传送门 BZOJ水题,for i=1~N,答案加上N/i即可 ANS=∑N/i(i∈{1~N}) code: /****************************************** ...

  4. Qt 学习之路 2

    Qt 学习之路 2 | DevBean Tech World Qt 学习之路 2 Qt 学习之路 2 目录

  5. C++中的引用常见用法

    1.引用的内涵 引用就是给变量取外号而已. 2.四种不能使用引用的情况 void &r=x; //不能建立void类型引用 int &&r=x; //不能建立引用的引用 int ...

  6. MySQL☞substr函数

    substr函数:截取字符串 格式如下: select  substr(参数1,参数2,参数3)  from  表名 参数1:列名/字符串 参数2:起始位置,如果为正数,就表示从正数的位置往下截取字符 ...

  7. POJ 3256 （简单的DFS)

    //题意是 K N, M; //有K个牛 N个牧场,M条路 ,有向的  //把K个牛放到任意的n个不同牧场中,问所有牛都可以到达的牧场数的总和  //这是一道简单的DFS题 //k 100 //n 1 ...

  8. 浅谈JS-cookie，你是香甜可口的小点心吗？

    引言: 想必大家一定听过或看过浏览器cookie,早在nokia雄霸天下.我们还不太明白浏览器的时候,cookie就已经悄悄地存在于浏览器的“设置选项”中了.当时它的用途仅仅是让你选择是否“清除”.年 ...

  9. Open MPI集群运行

    部署完之后,代码也能正确跑起来了,也确实集群分散了.跑一下各种各样的代码,发现了一个错误: $ ~/OpenMpi/bin/mpiexec -np ~/NetWorkTest My rank is M ...

  10. Python对文本文件逐行扫描，将含有关键字的行存放到另一文件

    #逐行统计关键字行数,并将关键字所在行存放在新的文件中 keyword = "INFO" b = open("C:\\Users\\xxx\\Documents\\new ...