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. HTML基础part1

    HTML基础 Web的本质就是利用浏览器访问socket服务端,socket服务端收到请求回复数据提供给浏览器进行渲染显示. import socket def main(): sock = sock ...

  2. 成都Uber优步司机奖励政策（3月16日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. IAR调试cc2541串口遇到的Warning : Possible IDATA stack overflow detected

    1. 遇到的错误如下,似乎是栈空间不够使用 2. 修改界面如下,增加IDATA的大小,不过最大似乎是0XFF.

  4. iOS - Foundation相关

    1.NSString         A.创建的方式:            stringWithFormat:格式化字符串  ,创建字符串对象在堆区域            @"jack& ...

  5. Linux工作环境搭建

    云主机工作环境搭建 网易云主机 需要申请弹性公网IP,不然需要OpenVPN才可以链接. 低于50块钱时,不能进行云主机创建. 更新yum源 cd /etc/yum.repos.d/ mkdir re ...

  6. 「日常训练」Duff in the Army （Codeforces Round #326 Div.2 E）

    题意(CodeForces 588E) 给定一棵\(n\)个点的树,给定\(m\)个人(\(m\le n\))在哪个点上的信息,每个点可以有任意个人:然后给\(q\)个询问,每次问\(u\)到\(v\ ...

  7. Linux命令应用大词典-第45章 服务器配置

    45.1 ssh-agent:存储用于公钥验证的私钥 45.2 ssh-add:添加RSA或DSA身份的认证代理 45.3 ssh-keyscan:收集主机公钥 45.4 sshd:运行sshd守护进 ...

  8. ObjectMapper的使用

    Jackson ObjectMapper类 ObjectMapper类是Jackson库的主要类它提供一些功能将Java对象转换成JSON结构,反之亦然它使用JsonParser和JsonGenera ...

  9. (原) MaterialEditor部- UmateriaEditor中 Node编译过程和使用（1）

    @author: 白袍小道 转载说明原处 插件同步在GITHUB: DaoZhang_XDZ     最后YY需求(手滑) 1.在理清楚基础套路和细节后,自定义纹理资源,并加入到现有UE材质系统 2. ...

  10. TensorFlow入门之MNIST最佳实践-深度学习

    在上一篇<TensorFlow入门之MNIST样例代码分析>中,我们讲解了如果来用一个三层全连接网络实现手写数字识别.但是在实际运用中我们需要更有效率,更加灵活的代码.在TensorFlo ...