设置元素为可拖放

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. 环境准备 Ubuntu & Docker

    目录 Ubuntu 简介 配置 Docker 简介 Docker CE 安装 参考 本文主要讲解在 Ubuntu 上安装和配置 Docker CE. Ubuntu 简介 Ubuntu(乌班图)是一个基 ...

  2. Scrum 冲刺博客第六篇

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 判断用户输入的答案是否正确并将其输出到界面中 今天计划完成的工作 对排行榜 ...

  3. 利用jquery的ajax实现跨域，内部其实是jsonp协议了，不是XHRhttp协议

    一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...

  4. Lambda表达式&匿名方法

    “Lambda表达式“(lambda Expression)就是一个匿名函数(匿名方法),lambda表达式基于数学中的入演算得名. lambda运算符:所有的lambda表达式都是用新的lambda ...

  5. SQL 之相关语法及操作符

    概述:UNION.SELECT INTO.INSERT INTO SELECT.SQL 约束. UNION操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION ...

  6. JDBC入门（3）--- PrepareStatement

    一.PrepareStatement概述 PrepareStatement是Statement接口的子接口: 1.强大之处: 防SQL攻击: 提高代码的可读性: 提高效率; 2.PrepareStat ...

  7. luogu P2801 教主的魔法

    题目描述 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.…….N. 每个人的身高一开始都是 ...

  8. 移动前端调试页面–weinre

    安装 npm install -g weinre 启动 weinre --boundHost -all- 浏览器查看 http://localhost:8080 插入相关文件 index.html d ...

  9. 【python爬虫】 之 爬取百度首页

    刚开始学习爬虫,照着教程手打了一遍,还是蛮有成就感的.使用版本:python2.7 注意:python2的默认编码是ASCII编码而python3默认编码是utf-8 import urllib2 u ...

  10. js判断是手机还是PC端

    有时接触一些手机上的适应,需要知道是pc 还是移动端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = [ ...