文档章节

原生Javascript+HTML5一步步实现拖拽排序

顽Shi
 顽Shi
发布于 2014/04/05 20:01
字数 2021
阅读 3694
收藏 68

  前言

    本文的内容就如题所述,之所以写这么个东西是有原因的,因为这两天重做公司的一个功能发现里面需要一个拖拽排序的功能.以前都是使用jquery各种插件去搞,因为这个项目不限制浏览器兼容问题就打算用HTML5来弄,走在时代的前沿不是,后来发现一个个属性那么写有点麻烦,就搜到一个HTML5的排序插件(纯粹抱着试试看的心里...不解释),没想到尼玛这插件竟然要jquery1.7以上支持,而且尼玛还是jquery~他妹的,不带你玩了,自己写~

  正文

    对HTML5有过了解的童鞋一定会知道它可以说非常使用的一个新特性,就是出现了元素拖放的接口,具体的API想详细了解的建议直接w3school去了解.

    (1) 通过draggable属性使你的元素可拖拽.

    这里我会对用到东西一点点的做出声明以及解释,铺垫的差不多了开始上干货,先构建一下基础的html和css,因为本文主旨不是样式所以没搞得太美观,就是OSC的绿以及中国红为主色,别介意:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5-Drag-Demo by 顽Shi</title>
  <style>
    .column {
      height: 200px;
      width: 200px;
      float: left;
      border: 2px solid black;
      background-color: green;
      margin-right: 5px;
      text-align: center;
      cursor: move;
    }
    .column header {
      color: black;
      text-shadow: #000 0 1px;
      box-shadow: 5px;
      padding: 5px;
      background: red;
      border-bottom: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="columns">
    <div draggable="true"><header>div1</header></div>
    <div draggable="true"><header>div2</header></div>
    <div draggable="true"><header>div3</header></div>
  </div>
</body>
</html>

    这就是html部分的代码,我们会逐渐完善它,效果图如下:

    html和css代码很简单我就不解释了,有疑问的请留言的说...这里我们只是为div加上了一个draggable的属性,并且将属性值设为true.这就是HTML5新增的一个属性,将一个元素设置为可拖拽.其实如果大家细心会发现浏览器上看到的很多内容都是可拖拽的,比如链接或者图片,我举一个百度首页的例子截图给大家,可以看到我拖拽百度logo也是可以的,而且它的代码上也没有draggables属性.

    这就是纯粹的浏览器支持,默认情况下大多数浏览器对于带有href属性的内容,比如超链接和图片等都是支持拖拽的,但是这个拖拽和我们今天要讲的DOM拖拽是不一样的.回到我们的demo,此时div1,div2,div3都可以进行拖拽了,类似与复制了一个自己的感觉,如果松开鼠标还会有一个滑回原来位置的默认动作.截图如下:

    拖拽动作在大多数浏览器下会创建一个自身的副本留在原来位置,这是一个很重要的东西,我们接下来会用到.

    (2) 对拖拽的动作进行监听

    现在元素可以移动了,但是距离我们的目标还有一定的差距,我们想做的是什么?

    我们希望的效果是元素被拖起来之后,可以在达到指定区域后,通过松开鼠标的动作将它固定在一个我们指定的位置上.所以我们要对这个过程中涉及到的动作加以监控.(不是所有的区域都能指定为元素被固定的区域,比如说图片就能接收其他元素).

    在拖动开始后我们希望被拖动的元素能变得透明一些,以区分出拖动和未拖动的不同,监听ondrugstart可以轻松实现,代码如下:

<script>
  var columns = document.querySelectorAll('#columns .column');
  
  [].forEach.call(columns,function(column){
    column.addEventListener("dragstart",domdrugstart,false);
  });
  
  function domdrugstart(e) {
    e.target.style.opacity = '0.5';
  }
</script>

    此时拖动一个元素,它的透明度会变为50%.不过拖动结束后这一效果还保留着,所以要在拖动结束重置会100%.这个留到最后实现即可.

    接下来我们实现的一个效果,是要在拖拽时将其可能放置的位置标识出来,显示出哪里是可能放置的位置,尤其在鼠标悬停或者划过的时候.这一过程需要ondragenter,ondragover以及ondragleave这三个事件的监听.代码如下:

    .column.over {
      border: 3px dashed #000;
    }
    //将这个样式添加到style中
    
    <script>
      var columns = document.querySelectorAll('#columns .column');
      
      [].forEach.call(columns,function(column){
        column.addEventListener("dragstart",domdrugstart,false);
        column.addEventListener('dragenter', domdrugenter, false);
        column.addEventListener('dragover', domdrugover, false);
        column.addEventListener('dragleave', domdrugleave, false);
      });
      
      function domdrugstart(e) {
        e.target.style.opacity = '0.5';
      }
      function domdrugenter(e) {
        e.target.classList.add('over');
      }
      function domdrugover(e) {
        if (e.preventDefault) {
          e.preventDefault(); 
        }
    
        e.dataTransfer.dropEffect = 'move';
    
        return false;
      }
      function domdrugleave(e) {
        e.target.classList.remove('over'); 
      }      
    </script>

    解释一下代码,dragenter事件的动作是拖动后鼠标进入另一个可接受区域,此时给添加了监听的对象加上一个虚线的边框,之所以使用dragenter而不是dragover是因为前者只在进入区域时触发一次,后者会反复触发.dragover则是为了阻止一些类似超链接拖动跳转的默认动作,dragleave则是去掉当拖拽鼠标划出区域时,去掉虚线.

    (3)  添加释放动作

    到此为止元素已经可以进行拖拽,并且并且在拖拽的过程有虚线的提示.但是现在还缺少一个完成的动作,也就是拖拽结束的动作,这个动作要有两个作用,一是和over类似去阻止浏览器的默认动作,二是根据我们的需求进行DOM操作.

    这里用到drop以及dragend:

<script>
  var columns = document.querySelectorAll('#columns .column');
  
  [].forEach.call(columns,function(column){
    column.addEventListener("dragstart",domdrugstart,false);
    column.addEventListener('dragenter', domdrugenter, false);
    column.addEventListener('dragover', domdrugover, false);
    column.addEventListener('dragleave', domdrugleave, false);
    column.addEventListener('drop', domdrop, false);
    column.addEventListener('dragend', domdrapend, false);    
  });
  
  function domdrugstart(e) {
    e.target.style.opacity = '0.5';
  }
  function domdrugenter(e) {
    e.target.classList.add('over');
  }
  function domdrugover(e) {
    if (e.preventDefault) {
      e.preventDefault(); 
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  }
  function domdrugleave(e) {
    e.target.classList.remove('over'); 
  }   
  function domdrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    return false;
  }
  function domdrapend(e) {
    [].forEach.call(columns, function (column) {
      column.classList.remove('over');
       column.style.opacity = '1';
    });
  }     
</script>

    至此我们会发现,还没有完成元素的交换这一动作,只是让所有的元素看起来可拖拽了而已,因为还缺少最后的DataTransfer对象.这是一个很神奇的东西,它使拖动的过程中可以发送数据,可以在dragstart中设置并且在drop或者dragend时读取.

    这里我们先看添加的代码:

  var dragEl = null;

  function domdrugstart(e) {
    e.target.style.opacity = '0.5';
    
    dragEl = this;
    
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html",this.innerHTML);
  }
  
  function domdrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    
    if (dragEl != this) {
      dragEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }    
    
    return false;
  }

    效果如图:

    最后这段代码可能大家会有疑惑,解释一下.首先定义了一个全局变量dragEl它的作用就是用来存储被拖拽元素的html,然后在释放拖拽时和释放区域的元素进行交换.e.dataTransfer.effectAllowed这个是用来限制元素的,它限制了元素的拖动类型为move.紧接着通过代码将被拖动元素的html进行setData.然后这里set的值可以通过get进行获取.

    基本上到这就完成了整个功能,稍微进行一下封装就可以形成插件,这个有兴趣的可以自己搞~最后附源码:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5-Drag-Demo by 顽Shi</title>
  <style>
    .column {
      height: 200px;
      width: 200px;
      float: left;
      border: 1px solid black;
      background-color: green;
      margin-right: 5px;
      text-align: center;
      cursor: move;
    }
    .column header {
      color: black;
      text-shadow: #000 0 1px;
      box-shadow: 5px;
      padding: 5px;
      background: red;
      border-bottom: 1px solid black;
    }
    .column.over {
      border: 3px dashed #000;
    }
  </style>
</head>
<body>
  <div id="columns">
    <div class="column" draggable="true"><header>div1</header></div>
    <div class="column" draggable="true"><header>div2</header></div>
    <div class="column" draggable="true"><header>div3</header></div>
  </div>
</body>
<script>
  var columns = document.querySelectorAll('#columns .column');
  
  var dragEl = null;
  
  [].forEach.call(columns,function(column){
    column.addEventListener("dragstart",domdrugstart,false);
    column.addEventListener('dragenter', domdrugenter, false);
    column.addEventListener('dragover', domdrugover, false);
    column.addEventListener('dragleave', domdrugleave, false);
    column.addEventListener('drop', domdrop, false);
    column.addEventListener('dragend', domdrapend, false);    
  });
  
  function domdrugstart(e) {
    e.target.style.opacity = '0.5';
    
    dragEl = this;
    
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html",this.innerHTML);
  }
  function domdrugenter(e) {
    e.target.classList.add('over');
  }
  function domdrugover(e) {
    if (e.preventDefault) {
      e.preventDefault(); 
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  }
  function domdrugleave(e) {
    e.target.classList.remove('over'); 
  }   
  function domdrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    
    if (dragEl != this) {
      dragEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }    
    
    return false;
  }
  function domdrapend(e) {
    [].forEach.call(columns, function (column) {
      column.classList.remove('over');
       column.style.opacity = '1';
    });
  }     
</script>
</html>

© 著作权归作者所有

顽Shi
粉丝 275
博文 81
码字总数 92387
作品 0
普陀
程序员
私信 提问
加载中

评论(6)

持羽静尘
您好,我想问一下,其实您这实现的是位置互换功能而不是真正意义上的排序,div3->div1位置之后,按照顺序排序应该是312的顺序但现在是321,这个应该怎么改呢?
木木老蔫
木木老蔫
我只想说,写的真好
顽Shi
顽Shi 博主

引用来自“孟想缤纷”的评论

你好,麻烦问问您,为了区分,我也将内容编码成1,2,3,4,但在ie11中进行拖拽,拖拽前后的两个div都变成了一样的内容呢?被复制了?
定义了一个全局变量dragEl它的作用就是用来存储被拖拽元素的html,然后在释放拖拽时和释放区域的元素进行交换.你看看是不是你JS这里写的不正确.
孟想缤纷
孟想缤纷
你好,麻烦问问您,为了区分,我也将内容编码成1,2,3,4,但在ie11中进行拖拽,拖拽前后的两个div都变成了一样的内容呢?被复制了?
d
danceshow
mark
yfwz100
yfwz100
不错~
一步步实现一个自适应的react-native拖拽排序

最近由于业务需求需要实现一个功能需要实现图片的上传和排序和删除,在网上搜索了几款发现都需要固定列数,感觉不太友好,所以自己实现了一个可以不需要设定列数的排序,而且布局高度实现自适...

mochixuan
2018/08/08
0
0
HTML5拖拽API实现vue树形拖拽组件

因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽。近期有时间将核心部分代码抽出,简单说下实现方式。 1.树形结构-组件递归使用 树形结构...

花卷爱学习
2018/05/10
0
0
iOS开发中的实用功能

嵌套UIScrollview的滑动冲突解决方案 虽然苹果建议我们不要嵌套 UIScrollview ,但是这话到底是对开发者说的,架不住设计师就是要这么画设计图。我遇到的场景类似这样,顶部有一个优先展示的...

掘金官方
2017/12/18
0
0
快速、灵活的对Table标签进行实例化,让Table标签充满活力。 - GridManager.js

GridManager特色: 原生实现: 无任何框架依赖 宽度调整: 表格的列宽度可进行拖拽式调整 位置更换: 表格的列位置进行拖拽式调整 配置列: 可通过配置对列进行显示隐藏转换 表头吸顶: 在表存在可...

拭目以待
2015/06/12
4.2K
8
从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/07/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
今天
4
0
Xss过滤器(Java)

问题 最近旧的系统,遇到Xss安全问题。这个系统采用用的是spring mvc的maven工程。 解决 maven依赖配置 <properties><easapi.version>2.2.0.0</easapi.version></properties><dependenci......

亚林瓜子
今天
10
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
9
0
Set 和 Map

Set 1:基本概念 类数组对象, 内部元素唯一 let set = new Set([1, 2, 3, 2, 1]); console.log(set); // Set(3){ 1, 2, 3 } [...set]; // [1, 2, 3] 接收数组或迭代器对象 ...

凌兮洛
今天
4
0
PyTorch入门笔记一

张量 引入pytorch,生成一个随机的5x3张量 >>> from __future__ import print_function>>> import torch>>> x = torch.rand(5, 3)>>> print(x)tensor([[0.5555, 0.7301, 0.5655],......

仪山湖
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部