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. go基础语法-指针

    1.基础定义 golang的指针没有cpp等语言的指针复杂,具体表现在其不可用于运算.只有值传递 语法:var variableName *int = memoryAddr var a = 2 var ...

  2. telnet 批处理

    **** 需要确认多台服务器端口是否打开,如果一个一个telnet会非常麻烦,通过百度,写了两个BAT,基本能做工作需要. ***start.bat start "" " ...

  3. mybatis中的resultMap实际作用

    resultMap和resultType在实际的使用上完全可以进行替换,但是resultMap有比resultType更多的一个功能.我们先定义一个简单的resultMap例子 <resultM ...

  4. python 的 购物小程序

    money = input('请输入您的工资:') shop = [("iphone",5800),("ipod",3000),("book" ...

  5. 安卓app连接CC2541-手机休眠后唤醒，通信不再成功

    1. 现在遇到的问题,手机进入休眠状态后唤醒,APP软件和CC2541的通信不正常了,但是CC2541依然检测到时连接状态.如何解决这个问题?手机唤醒之后会重新创建活动? 2.Wakelock 锁机制 ...

  6. UPA深度性能报告解读

    WeTest 导读 UPA作为腾讯WeTest与Unity官方联合打造的客户端性能分析工具,为开发者提供了极大的便利和效能提升.产出的分析报告内容详尽,但您是否真的读懂了报告?是否了解每项数据的含义? ...

  7. Qt-第一个QML程序-2-关键代码分析，TEXT，Image，Mouseare

    qml语言开始写的时候有点不习惯,后面用的多了感觉很好,很顺手,用于快速搭建项目界面,真的很好. 目前用到的还是比较简单的 隐藏标题栏,而依附任务栏 flags: Qt.Window | Qt.Fra ...

  8. gitlab-登录账户遇到ERROR: Permission to XXX.git denied to user报错怎么办

    碰到这个问题就意味着没有访问账户的权限,没有把访问电脑与访问账户用ssh_key关联起来,解决流程: 1.查看本地是否有ssh_key 笔者用的是git bash来输入命令 ls -al ~/.ssh ...

  9. Python里//与/的区别？

    1.Python里面//的作用是除法取整,也就是直接取整数部分 例如:5//6=0; 56//3=18 2.而/的作用是直接进行常规的除法运算 例如:56/8=7 程序运算实例如下:

  10. Python 关键字参数和可变参数

    关键字参数 如果你有一些具有许多参数的函数,而你又希望只对其中的一些进行指定,那么你可以通过命名它们来给这些参数赋值——这就是python关键字参数(Keyword Arguments)——我们使用命 ...