设置元素为可拖放

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. Go RabbitMQ（三）发布订阅模式

    RabbitMQ 在上一节中我们创建了工作队列,并且假设每一个任务都能够准确的到达对应的worker.在本节中我们将介绍如何将一个消息传递到多个消费者,这也就是所说的发布订阅模式 为了验证该模式我们使 ...

  2. WEB Front-end Development Technology

    1.Einführung der HTML(Hypertext Markup Language) 1.1 Grundlegendes Label 1.1.1 Block Label <h1> ...

  3. Prinzipien der Computer Zusammensetzung

    1.Die Einfuerung der Computer System 1.1 Computer Zusammensetzung und Computer Architektur Unter Com ...

  4. [Mysql 查询语句]——对查询结果进一步的操作

    distinct 不显示重复的查询结果 (1) 对于表中一些没有唯一性约束的字段,可能存在重复的值,这时可以使用distinct来消除那些查询结果中的重复值 select cust_id  from ...

  5. CSS3 图标神器 => content:"我是特殊符号"

    基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC ◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 260 ...

  6. 【C#】RGB转CMYK

    由于目前印兔项目中的在线设计功能设计出来的产品颜色模式不确定,但是客户设计出来的产品需要发送到印厂的客户端去下载并且印刷,只有CMYK颜色模式的产品才能正确印刷,所以需要判断产品的颜色模式是否为CMY ...

  7. input type =text，按回车键自动提交

    1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' ac ...

  8. Spring学习笔记：spring与mybatis四种整合方法

    1.采用数据映射器(MapperFactoryBean)的方式,不用写mybatis映射文件,采用注解方式提供相应的sql语句和输入参数.  (1)Spring配置文件: <!-- 引入jdbc ...

  9. CentOS 安装Parallels Tools

    为了做到Mac和Linux之间共享文件夹,因此需要安装Parallels Tool, 具体安装步骤可以参考 install parallels tool for linux guest http:// ...

  10. HDOJ2037 今年暑假不AC （经典的贪心问题）

    Description “今年暑假不AC?” “是的.” “那你干什么呢?” “看世界杯呀,笨蛋!” “@#$%^&*%...” 确实如此,世界杯来了,球迷的节日也来了,估计很多ACMer也会 ...