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. SpaceVim 发布 v0.8.0

    This project exists thanks to all the people who have contributed. The last release v0.7.0 is target ...

  2. 北京Uber优步司机奖励政策(2月1日)

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

  3. 青岛Uber优步司机奖励政策（1月4日~1月10日）

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

  4. day 1 安装pygame

    1.稀里糊涂装上了 参考博客:http://blog.csdn.net/sinat_40043477/article/details/78276460

  5. 水灾 1000MS 64MB (广搜)

    水灾(sliker.cpp/c/pas) 1000MS  64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY ...

  6. 三、并行流与串行流 Fork/Join框架

    一.并行流概念: 并行流就是把一个内容分成多个数据块,并用不同的线程分别处理每个数据块的流. java8中将并行进行了优化,我们可以很容易的对数据进行并行操作.Stream API可以声明性的通过pa ...

  7. 前端图片转base64，转格式，转blob，上传的总结

    1. 图片文件转base64 <input accept="image/gif,image/jpeg,image/jpg,image/png" type="file ...

  8. js函数相关高级用法

    一.惰性载入函数(lazy function) 使用场景:当一个函数中的判断分支只用执行一次(第一次调用时执行),后续不会再变化,则可以使用惰性函数来提高性能. var addEvent = func ...

  9. Selenium自动化测试第一天(下)

    如有任何学习问题,可以添加作者微信:lockingfree 目录 Selenium自动化测试基础 Selenium自动化测试第一天(上) Selenium自动化测试第一天(下) Selenium自动化 ...

  10. 接口测试工具postman（八）上传文件接口

    涉及到选择文件的接口,在[Body]页签下,key选择File选项,会显示“选择文件”按钮,选择本地的文件