搜索
Hi~登录注册
查看: 3670|回复: 7

[源码] 自動排序

[复制链接]

23

主题

83

帖子

31

积分

UID
156
时空币
136
时之结晶
53
最后登录
2017-10-19

≌萌新≌☆大佬☆

发表于 2017-8-31 17:59:27 | 显示全部楼层 |阅读模式
本帖最后由 HelloWord 于 2017-8-31 18:01 编辑
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.                 <title>test</title>
  6.                 <meta id="meta-viewport" name="viewport" content="width=device-width">
  7.                 <style type="text/css">
  8.                         .sortable {
  9.                                 border: solid 1px #ddd;
  10.                                 padding: 20px 30px;
  11.                                 margin: 100px;
  12.                         }
  13.                        
  14.                         .sortable .item {
  15.                                 width: 210px;
  16.                                 border: solid 1px #ccc;
  17.                                 line-height: 30px;
  18.                                 padding-left: 10px;
  19.                                 cursor: move;
  20.                                 transition: all .2s ease;
  21.                         }
  22.                        
  23.                         .sortable .item strong {
  24.                                 color: #333;
  25.                                 -webkit-user-select: none;
  26.                         }
  27.                 </style>
  28.         </head>

  29.         <body>
  30.                 <div class="sortable" id="sortable">
  31.                         <div class="item">
  32.                                 <strong>吸血恶魔兽</strong>
  33.                         </div>
  34.                         <div class="item">
  35.                                 <strong>超究极魔兽</strong>
  36.                         </div>
  37.                         <div class="item">
  38.                                 <strong>恶魔兽</strong>
  39.                         </div>
  40.                         <div class="item">
  41.                                 <strong>小丑皇兽</strong>
  42.                         </div>
  43.                         <div class="item">
  44.                                 <strong>小恶魔兽</strong>
  45.                         </div>
  46.                         <div class="item">
  47.                                 <strong>究极恶魔兽</strong>
  48.                         </div>
  49.                 </div>

  50.                 <script>
  51.                         var itemArr = document.getElementsByClassName('item');
  52.                         for(var i = 0; i < itemArr.length; i++) {
  53.                                 itemArr[i].setAttribute('draggable', 'true');
  54.                                 itemArr[i].dataset.order = i;
  55.                         }

  56.                         var targetY = 0;
  57.                         var itemHeight = itemArr[0].innerHeight;
  58.                         var nowItem = "";
  59.                         var targetItem = "";
  60.                        
  61.                         //拖拽开始
  62.                         document.addEventListener('dragstart', function(event) {
  63.                                 event.target.style.opacity = "0.4";
  64.                                 nowItem = event.target.dataset.order;
  65.                         }, false)
  66.                        
  67.                         //拖拽中
  68.                         document.addEventListener('drag', function(event) {
  69.                                 if(event.pageY >= targetY ) {
  70.                                         document.getElementById('sortable').insertBefore(event.target, targetItem.nextSibling);
  71.                                 }else{
  72.                                         document.getElementById('sortable').insertBefore(event.target, targetItem);
  73.                                 }
  74.                         }, false)
  75.                        
  76.                         //拖拽结束
  77.                         document.addEventListener('dragend', function(event) {
  78.                                 event.target.style.opacity = "1";
  79.                                 for(var i = 0; i < itemArr.length; i++) {
  80.                                         itemArr[i].dataset.order = i;
  81.                                 }
  82.                         }, false)
  83.                        
  84.                         //拖拽到目标
  85.                         document.addEventListener("dragenter", function(event) {
  86.                                 if(event.target.className == "item" ) {
  87.                                         console.log('目标:' + event.pageY);
  88.                                         targetY = event.pageY;
  89.                                         targetItem = event.target;
  90.                                 } else {
  91.                                         console.log("不是拖动目标");
  92.                                 }
  93.                         });
  94.                 </script>
  95.         </body>

  96. </html>
复制代码

回复

使用道具 举报

31

主题

89

帖子

551

积分

UID
34
时空币
890
时之结晶
2046
最后登录
2020-5-22
发表于 2017-8-31 19:49:21 | 显示全部楼层
原生JS好久没用过了
回复 支持 反对

使用道具 举报

23

主题

83

帖子

31

积分

UID
156
时空币
136
时之结晶
53
最后登录
2017-10-19

≌萌新≌☆大佬☆

 楼主| 发表于 2017-9-1 15:17:19 | 显示全部楼层
残酷 发表于 2017-8-31 19:49
原生JS好久没用过了

{:1_165:}我叫淡漠 本名还记得?
回复 支持 反对

使用道具 举报

20

主题

425

帖子

4013

积分

UID
664
时空币
727
时之结晶
44130
最后登录
2024-1-22
发表于 2017-9-1 22:37:13 | 显示全部楼层
这代码是用来排列什么的?
回复 支持 反对

使用道具 举报

31

主题

89

帖子

551

积分

UID
34
时空币
890
时之结晶
2046
最后登录
2020-5-22
发表于 2017-9-2 00:02:51 | 显示全部楼层
398681207 发表于 2017-9-1 22:37
这代码是用来排列什么的?

也不是自动排序,核心代码是insertBefore,可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码吧,自定义了一个下标属性,来记录每个元素的下标,我的理解就是这样,代码没仔细看,粗略看了一下,原生很久没用了
回复 支持 反对

使用道具 举报

20

主题

425

帖子

4013

积分

UID
664
时空币
727
时之结晶
44130
最后登录
2024-1-22
发表于 2017-9-2 21:55:16 | 显示全部楼层
残酷 发表于 2017-9-2 00:02
也不是自动排序,核心代码是insertBefore,可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码 ...

不明觉厉,支持一下先
回复 支持 反对

使用道具 举报

0

主题

8

帖子

14

积分

UID
676
时空币
33
时之结晶
26
最后登录
2017-9-11
发表于 2017-9-3 14:53:36 | 显示全部楼层
看不懂                           
回复 支持 反对

使用道具 举报

0

主题

3

帖子

134

积分

UID
2655
时空币
274
时之结晶
271
最后登录
2020-4-3
发表于 2019-4-26 13:50:44 | 显示全部楼层
创意哦!楼主高人啊 谢












外贸公司实习报告
回复 支持 反对

使用道具 举报

游客
回复
您需要登录后才可以回帖 登录 | 获取帐号

快速回复 返回顶部 返回列表