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. SDWebImage的原理 和 实现机制 --- tableView 滑动卡的问题

    一.原理 1)当我门需要获取网络图片的时候,我们首先需要的便是URl没有URl什么都没有,获得URL后我们SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URl相关的图片,如 ...

  2. spring cloud 服务注册中心eureka高可用集群搭建

    spring cloud 服务注册中心eureka高可用集群搭建 一,准备工作 eureka可以类比zookeeper,本文用三台机器搭建集群,也就是说要启动三个eureka注册中心 1 本文三台eu ...

  3. 一个例子说明substr(), mb_substr() 和 mb_strcut()之间的区别

    例子来自PHP官方文档,我只是翻译下. http://www.php.net/manual/zh/function.mb-strcut.php header( 'Content-Type:text/h ...

  4. onenet基础通信套件加B300移植

    1. 遇到的第一个问题,说是少了文件,但是明明有这个文件的啊? scons: warning: Ignoring missing SConscript 'build_scons\arm\Hi2115\ ...

  5. C# 浮点转时间

    想了大半天实在想不出什么更适合文章的标题... 就现在这个标题,挺好- - 什么是浮点转时间呢? 今天写的一个计时功能,想来想去还是现在这种解决方案比较合适 先上一张图在来讲解比较明了 如图:赛车游戏 ...

  6. Objective-C 封装 继承 多态

    封装 #import <Foundation/Foundation.h> @interface Person : NSObject { //@public int _age; } - (v ...

  7. 【wx:if】小程序条件渲染的使用说明

    语法,以view为例: <view xw:if="{{条件}}">aaaa</view> <view xw:elif="{{条件}}&quo ...

  8. linux学习总结----shell编程

    ## 环境变量 ## 全局变量 ``` 常见的全局环境变量 PATH 指令的搜索路径 HOME 用户的家目录 LOGNAME 登录名 SHELL 脚本的类型 使用全局环境变量 echo $PATH 自 ...

  9. c字符指针与字符数组的区别

    1.定义 char *pchar;  //定义了指针,没赋值之前不能使用.如果:printf("*pchar:%c\n",*pchar); 出现段错误Segmentation fa ...

  10. Tensorflow - Implement for generating some 3-dimensional phony data and fitting them with a plane.

    Coding according to TensorFlow 官方文档中文版 import tensorflow as tf import numpy as np ''' Intro. for thi ...