设置元素为可拖放

draggable 属性设置为 true:

    <img draggable="true" />
拖动什么 - ondragstart 和 setData()
dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(e) {

        e.dataTransfer.setData("text/html", value);

    }
注："text/html"参数，我在Mac上用Safari打开，遇到过不能正常解析，解决方法把html和text位置互换一下。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

　　event.preventDefault();
进行放置 - ondrop
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

通过 dataTransfer.getData("text/html") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

function drop(e) {

    e.preventDefault();

}
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

示例：

Example1:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    html,

    body {

        margin: 0;

        padding: 0;

    }

    .drag {

        width: 50px;

        height: 50px;

        background: blue;

        display: inline-block;

        margin: 10px;

        color: white;

        font-size: 20px;

        text-align: center;

        line-height: 50px;

        cursor: move;

    }

    </style>

</head>

<body>

    <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1</div>

    <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2</div>

    <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3</div>

    <script type="text/javascript">

        var srcEl = null;

        function drag(e, el) {

            srcEl = el;

            e.dataTransfer.setData("text/html", el.innerHTML);

        }

        function drop(e, el){

            e.preventDefault();

            // e.stopPropagation();

            if (srcEl != el) {

                srcEl.innerHTML = el.innerHTML;

                el.innerHTML = e.dataTransfer.getData("text/html");

            }

        }

        function allowDrop(e) {

            e.preventDefault();

        }

    </script>

</body>

</html>
Example2:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    html,

    body {

        margin: 0;

        padding: 0;

    }

    #div1 {

        width: 300px;

        height: 300px;

        border: 1px solid red;

    }

    #drag1 {

        width: 300px;

        height: 300px;

    }

    </style>

</head>

<body>

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

    <img id="drag1" draggable="true" ondragstart="drag(event)"

        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />

    <script type="text/javascript">

    function drag(e) {

        e.dataTransfer.setData("text/html", e.target.id);

    }

    function drop(e) {

        e.preventDefault();

        e.stopPropagation();

        var id = e.dataTransfer.getData('text/html');

        e.target.appendChild(document.getElementById(id));

    }

    function allowDrop(e) {

        e.preventDefault();

    }

    </script>

</body>

</html>

W3school原文链接：http://www.w3school.com.cn/html5/html_5_draganddrop.asp

HTML5 拖放、交换位置的更多相关文章

  1. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  2. HTML5 拖放

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...

  3. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  4. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  5. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  6. html5 拖放学习

    html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...

  7. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  8. 用C语言把双向链表中的两个结点交换位置，考虑各种边界问题。

    用C语言把双向链表中的两个结点交换位置,考虑各种边界问题. [参考] http://blog.csdn.net/silangquan/article/details/18051675

  9. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  10. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

随机推荐

  1. vlog常用参数解析

    1. -f <filelist> : compile all files in filelist --------------------------------------------- ...

  2. 一个简单好用的强制删除软件geek

    给大家推荐geek软件工具,一个可以用来强制卸载那些常规手段无法卸载的软件,到官网(https://geekuninstaller.com/download)下载免费版,运行软件后,选择需要强制删除软 ...

  3. C#图片验证码绘制

    制作验证码.也可以画弧线之类..... //新建一个网站,在后台代码中引用一个using Stystem.Drawing的命名空间 Bitmap img = , ); //制作一个宽100,高50的画 ...

  4. 四、curator recipes之共享重入互斥锁

    简介 curator的recipes实现了可重入互斥锁,允许你在分布式场景下多个进程之间实现锁的互斥以协调多进程执行. 相关类:InterProcessMutex 官方文档:http://curato ...

  5. 以太坊-windows-私有链-搭建（非源码）

    初 接触以太坊,只安装,不讲道理: 1.win10系统,64位 2.以太坊钱包 3.以太坊geth客户端 geth 和 钱包可以到ethfans.org的资料库里下载,那里提供国内镜像和官网地址. 钱 ...

  6. Spring Boot学习笔记(三)实现热部署

    pom文件中添加如下依赖即可 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...

  7. [JAVA IDEA]在使用maven项目中，无法读取resources文件夹中的配置文件的一种解决方案

    1.在通过配置文件来连接数据库时,在resouces文件中放入了db.properties配置文件,但无法正常读取到 读取配置文件信息的代码: InputStream input=JdbcUtil.c ...

  8. log4php使用及配置

    log4php使用及配置 1.在项目中加入log4php包 2.log4php配置 在项目配置包中添加logger_config.xml配置文件: logger_config.xml配置文件添加代码如 ...

  9. csu 1365 双向链表模拟超时

    1365: Play with Chain Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 21  Solved: 5[Submit][Status][W ...

  10. BZOJ3193: [JLOI2013]地形生成

    传送门 Sol 第一问可以考虑按照山的高度从大到小放 但是这样如果遇到高度相同的就不好考虑,那么同时要求数量限制从小到大 这样每次放的时候后面的一定不会影响前面,并且高度相同的时候前面能放的位置后面的 ...