1、拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放（注：在 Safari 5.1.2 中不支持拖放。）。

2、相关属性及方法 

设置元素为可拖放，把 draggable 属性设置为 true

 <labeldraggable="true"">index1</label>

设置元素被拖动时触发的事件 ondragstart

<label draggable="true" ondragstart="drag(event)">...</label>

放到何处 - ondragover ，以div 为例：

<div id="right" ondragover="dragover(event)">...</div>

进行放置 - ondrop，以div 为例：

<div id="right" ondragover="dragover(event)" ondrop="drop(event)">...</div>

3、实现一个简单的 从左向右 或 从右向左 拖动元素，且可以移动元素之前的排列位置。

效果图：

图1.初次加载

                          图2.从左向右拖动元素 

                        图3.打乱右侧元素排序

图4.把右侧元素移向左边

html: 

拖动元素的方法，未在元素上进行绑定，均在 js 里进行绑定

 <h2>拖放（Drag 和 drop）</h2>

 <!-- 左边元素框 -->

 <div id="left">

     <label draggable="true">index1</label>

     <label draggable="true">index2</label>

     <label draggable="true">index3</label>

     <label draggable="true">index4</label>

     <label draggable="true">index5</label>

     <label draggable="true">index6</label>

     <label draggable="true">index7</label>

 </div>

 <!-- 右边元素框 -->

 <div id="right"></div>

javascript:

  动态给 label元素 加上 id属性 及拖动事件

 var moveItem = document.getElementsByTagName('label');

 for (let i = 0; i < moveItem.length; i++) {

    //动态设置label元素id

    moveItem[i].setAttribute('id', 'label' + i);

    moveItem[i].ondragstart = function (ev) {

        //dataTransfer.setData() 方法设置被拖数据的数据类型和值

        ev.dataTransfer.setData("Text", this.id);

    };

 }

设置 左边－〉右边 拖动 或 自身元素排序

         document.getElementById('right').ondragover = function (ev) {

             ev.preventDefault(); //阻止向上冒泡

         }

         document.getElementById('right').ondrop = function (ev) {

             ev.preventDefault();

             var id = ev.dataTransfer.getData('Text');

             var elem = document.getElementById(id); //当前拖动的元素

             var toElem = ev.toElement.id; //放置位置

             if (toElem == 'right') {

                 //如果为container,元素放置在末尾

                 this.appendChild(elem);

             } else {

                 //如果为container里的元素，则插入该元素之前

                 this.insertBefore(elem, document.getElementById(toElem));

             }

         }

设置右边－〉左边拖动 或 自身元素排序

         document.getElementById('left').ondragover = function (ev) {

             ev.preventDefault(); //阻止向上冒泡

         }

         document.getElementById('left').ondrop = function (ev) {

             ev.preventDefault();

             var id = ev.dataTransfer.getData('Text');

             var elem = document.getElementById(id);

             var toElem = ev.toElement.id;

             if (toElem == 'left') {

                 //如果为container,元素放置在末尾

                 this.appendChild(elem);

             } else {

                 //如果为container里的元素，则插入该元素之前

                 this.insertBefore(elem, document.getElementById(toElem));

             }

         }

代码解释：

  • ondragover 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

完整代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>拖动</title>

    <style>

        h2 {

            font-size: 20px;

            color: #0d88c1;

        }

        div#left,

        div#right {

            width: 120px;

            float: left;

            margin: 10px 100px 10px 0px;

            height: 240px;

            background-color: #dddddd;

            border: 1px solid #000;

            overflow-y: auto;

        }

        div label {

            font-size: 22px;

            font-weight: bold;

            width: 100%;

            display: inline-block;

            padding: 4px 0;

            text-align: center;

            margin: 0px 0 2px 0;

            color: #fff;

            background-color: #0d88c1;

        }

    </style>

</head>

<body>

    <h2>拖放（Drag 和 drop）</h2>

    <!-- 左边元素框 -->

    <div id="left">

        <label draggable="true">index1</label>

        <label draggable="true">index2</label>

        <label draggable="true">index3</label>

        <label draggable="true">index4</label>

        <label draggable="true">index5</label>

        <label draggable="true">index6</label>

        <label draggable="true">index7</label>

    </div>

    <!-- 右边元素框 -->

    <div id="right"></div>

    <script>

        var moveItem = document.getElementsByTagName('label');

        for (let i = 0; i < moveItem.length; i++) {

            //动态设置label元素id

            moveItem[i].setAttribute('id', 'label' + i);

            moveItem[i].ondragstart = function (ev) {

                //dataTransfer.setData() 方法设置被拖数据的数据类型和值

                ev.dataTransfer.setData("Text", this.id);

            };

        }

        //左－〉右

        document.getElementById('right').ondragover = function (ev) {

            ev.preventDefault(); //阻止向上冒泡

        }

        document.getElementById('right').ondrop = function (ev) {

            ev.preventDefault();

            var id = ev.dataTransfer.getData('Text');

            var elem = document.getElementById(id); //当前拖动的元素

            var toElem = ev.toElement.id; //放置位置

            if (toElem == 'right') {

                //如果为container,元素放置在末尾

                this.appendChild(elem);

            } else {

                //如果为container里的元素，则插入该元素之前

                this.insertBefore(elem, document.getElementById(toElem));

            }

        }

        //右－〉左

        document.getElementById('left').ondragover = function (ev) {

            ev.preventDefault(); //阻止向上冒泡

        }

        document.getElementById('left').ondrop = function (ev) {

            ev.preventDefault();

            var id = ev.dataTransfer.getData('Text');

            var elem = document.getElementById(id);

            var toElem = ev.toElement.id;

            if (toElem == 'left') {

                //如果为container,元素放置在末尾

                this.appendChild(elem);

            } else {

                //如果为container里的元素，则插入该元素之前

                this.insertBefore(elem, document.getElementById(toElem));

            }

        }

    </script>

</body>

</html>

HTML5 元素拖动 - 实现元素左右拖动， 或更改自身排序的更多相关文章

  1. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  2. vue实现拖动div元素

    html: <div id="app1"> <div v-drag class="drag"></div> <div ...

  3. html5实现本页面元素拖放和本地文件拖放

    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...

  4. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  5. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  6. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  7. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  8. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  9. HTML5之新增的元素和废除的元素 （声明：内容节选自《HTML 5从入门到精通》）

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

随机推荐

  1. Postgres中tuple的组装与插入

    1.相关的数据类型 我们先看相关的数据类型: HeapTupleData(src/include/access/htup.h) typedef struct HeapTupleData { uint3 ...

  2. Linux kernel学习-内存管理

    转自:https://zohead.com/archives/linux-kernel-learning-memory-management/ 本文同步自(如浏览不正常请点击跳转):https://z ...

  3. HZ与Jiffies

    2.4 内核定时器 内核中许多部分的工作都高度依赖于时间信息.Linux内核利用硬件提供的不同的定时器以支持忙等待或睡眠等待等时间相关的服务.忙等待时,CPU 会不断运转.但是睡眠等待时,进程将放弃C ...

  4. Apache虚拟主机配置（多个域名访问多个目录）（转）

    Apache虚拟主机配置(多个域名访问多个目录) 为了方便管理虚拟主机,我决定使用一种方法,那就是修改httpd-vhosts.conf文件. 第一步首先要使扩展文件httpd-vhosts.conf ...

  5. MySQL-事务特性

    1. 事务概念引入: 现实生活中,我们往往经常会进行转账操作,转账操作可以分为两部分来完成,转入和转出.只有这两部分都完成了才可以认为是转账成功.在数据库中,这个过程是使用两条语句来完成的,如果其中任 ...

  6. iBatis应用--控制执行SQL时的超时时间

    https://blog.csdn.net/jackie_xiaonan/article/details/8459320

  7. TeX Live & TeXstudio 安装手记

    数据库课上又看到了那位用 beamer 做 slides 的师兄,想到自己一拖再拖的LaTeX入门,决定赶快动手装个环境再说~在经过一番搜索和研究之后决定先在 windows 底下试用,选择 TeX ...

  8. int类中的方法

    我们知道在python中,一切对象都是类,对象的方法都封装在类中,现在来探讨一下int类中的方法: 我们可以通过help(int)和dir(int)来查看int类中都封装了那些方法:     1.bi ...

  9. 【LOJ】#2006. 「SCOI2015」小凸玩矩阵

    题解 又是美好的一天,我今天的小目标是LOJ刷题数名次前进两名(虽然巨佬们都是BZOJ千题啊这样的><,我就在LOJ划划水吧,我永远喜欢LOJ 这道题要求K大值最小,又是什么什么大值最小, ...

  10. 易普优APS应用案例：线束行业生产计划排产

    一.线束行业生产现状 (1)产品种类以及标准繁多,生产计划难协调 线束行业的生产,虽然原材料不多,但线束产品却多达几万种.一般线束企业,虽然不是每个月都生产数万种产品,但每月生产的产品品种在300种以 ...