设置元素为可拖放

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. 6.046 Design and Analysis of Algorithms

    课程信息 6.046 Design and Analysis of Algorithms

  2. 四大CPU体系结构：ARM、X86/Atom、MIPS、PowerPC

    补充介绍一下RISC:RISC(reduced instruction set computer,精简指令集计算机)是一种执行较少类型计算机指令的微处理器,起源于80年代的MIPS主机(即RISC机) ...

  3. 微信小程序自学过程中遇到的问题 转

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class=" ...

  4. 关于service相关知识的认识

    做android的程序开发也有了许久了,当做一个大程序的时候,越来越发现service是非常有用的方法,当你想后台运行数据或者音乐播放操作的时候,都可以才有service,根据实际情况,写成local ...

  5. jquery里判断数组内是否包含了指定的值或元素的方法

    本文讲的是在jquery里,如何判断一个数组里是否包含了指定的值,变量,或其它对象元素的方法. 在jquery里,我们可以用$.inArray来判断一个数组里是否包含了指定的值或其它对象元素,来看一个 ...

  6. 使用FileSystemWatcher监视指定目录

    使用 FileSystemWatcher 监视指定目录中的更改.可监视指定目录中的文件或子目录的更改. 以下是一个简单的实例,用来监控指定目录下文件的新增.删除.重命名等情况(文件内容更改会触发多次, ...

  7. Docker学习之基本概念

    Docker学习之基本概念 作为一个后端noder,不了解docker有点说不过去,这节开始,学习一些docker层面的东西. 什么是docker Docker最初是dotCloud公司创始人Solo ...

  8. git pull和git pull --rebase的使用

    使用下面的关系区别这两个操作: git pull = git fetch + git merge git pull --rebase = git fetch + git rebase 现在来看看git ...

  9. HDU 3306 Another kind of Fibonacci ---构造矩阵***

    Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  10. Jenkins-在节点上执行copy命令，将节点机上的文件拷贝到映射的网络驱动盘中报错，访问被拒绝 找不到指定驱动器

    问题如标题,根据网友提供的解决方法,完美解决: 在jenkins中执行这个命令时报错 说无法访问. 重新映射一次可解决这个问题,添加一条 net use 命令