设置元素为可拖放

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. mysql备份 小结 （三种方式的详细解读）

    备份的本质就是将数据集另存一个副本,但是原数据会不停的发生变化,所以利用备份只能回复到数据变化之前的数据.那变化之后的呢?所以制定一个好的备份策略很重要 新建一个all.sqlvim all.sql在 ...

  2. bootstrap table demo

    js 代码 //搜索 function searchTable(){ var searchInfo = $("#searchForm").serializeJsonObject() ...

  3. io多大合适

    MySQL的cpu iowait值,<=1/(number of cores).例如,如果是8核的,io wait 应<=12%. "Monitor DB CPU IO wait ...

  4. XAMPP环境的搭建

    XAMPP是一个强大的集成软件包(什么是集成软件包?就是多个软件打包一起安装了,比如office办公软件包括了word.Excel.PPT) XAMPP包括了Apache,MySQL,PHP,Perl ...

  5. BigDecimal 精准加减乘除

    解决了double和float精确度的问题 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效 ...

  6. JSP简单实现登录和注销

    JSP简单实现登录和注销 需求:用户登录成功后跳转到欢迎页面 用户登录失败跳转到初始的登录界面 用户点击注销,用户退出登录状态需要重新登录 登录页面的JSP代码: <%@ page langua ...

  7. js实现队列结构

    创建队列 let items function Queue { this.enqueue = function(element){ items.push(element) } this.dequeue ...

  8. UOJ42. 【清华集训2014】Sum

    传送门 Sol \((-1)^a=1-2(a~mod~2)=1-2a+4\lfloor\frac{a}{2}\rfloor\) 那么原式变成 \(n-2\sum_{i=1}^{n}\lfloor d\ ...

  9. Linux VPS主机利用Crontab实现定时重启任务

    第一.安装Crontab可执行环境 一般的VPS/服务器是支持的,但是有些可能没有支持就需要我们来给予安装. A - centos系统 #安装Crontab yum install vixie-cro ...

  10. drupal7 用到的一些钩子简介

    1.hook_user_delete($account) 可用于自定义模块中,当用户被删除时,可以自定义一些自己需要的处理动作 2.hook_mail_alter(&$message) 可用于 ...