HelloWord 发表于 2017-8-31 17:59:27

自動排序

本帖最后由 HelloWord 于 2017-8-31 18:01 编辑

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>test</title>
                <meta id="meta-viewport" name="viewport" content="width=device-width">
                <style type="text/css">
                        .sortable {
                                border: solid 1px #ddd;
                                padding: 20px 30px;
                                margin: 100px;
                        }
                       
                        .sortable .item {
                                width: 210px;
                                border: solid 1px #ccc;
                                line-height: 30px;
                                padding-left: 10px;
                                cursor: move;
                                transition: all .2s ease;
                        }
                       
                        .sortable .item strong {
                                color: #333;
                                -webkit-user-select: none;
                        }
                </style>
        </head>

        <body>
                <div class="sortable" id="sortable">
                        <div class="item">
                                <strong>吸血恶魔兽</strong>
                        </div>
                        <div class="item">
                                <strong>超究极魔兽</strong>
                        </div>
                        <div class="item">
                                <strong>恶魔兽</strong>
                        </div>
                        <div class="item">
                                <strong>小丑皇兽</strong>
                        </div>
                        <div class="item">
                                <strong>小恶魔兽</strong>
                        </div>
                        <div class="item">
                                <strong>究极恶魔兽</strong>
                        </div>
                </div>

                <script>
                        var itemArr = document.getElementsByClassName('item');
                        for(var i = 0; i < itemArr.length; i++) {
                                itemArr.setAttribute('draggable', 'true');
                                itemArr.dataset.order = i;
                        }

                        var targetY = 0;
                        var itemHeight = itemArr.innerHeight;
                        var nowItem = "";
                        var targetItem = "";
                       
                        //拖拽开始
                        document.addEventListener('dragstart', function(event) {
                                event.target.style.opacity = "0.4";
                                nowItem = event.target.dataset.order;
                        }, false)
                       
                        //拖拽中
                        document.addEventListener('drag', function(event) {
                                if(event.pageY >= targetY ) {
                                        document.getElementById('sortable').insertBefore(event.target, targetItem.nextSibling);
                                }else{
                                        document.getElementById('sortable').insertBefore(event.target, targetItem);
                                }
                        }, false)
                       
                        //拖拽结束
                        document.addEventListener('dragend', function(event) {
                                event.target.style.opacity = "1";
                                for(var i = 0; i < itemArr.length; i++) {
                                        itemArr.dataset.order = i;
                                }
                        }, false)
                       
                        //拖拽到目标
                        document.addEventListener("dragenter", function(event) {
                                if(event.target.className == "item" ) {
                                        console.log('目标：' + event.pageY);
                                        targetY = event.pageY;
                                        targetItem = event.target;
                                } else {
                                        console.log("不是拖动目标");
                                }
                        });
                </script>
        </body>

</html>

残酷 发表于 2017-8-31 19:49:21

原生JS好久没用过了

HelloWord 发表于 2017-9-1 15:17:19

残酷 发表于 2017-8-31 19:49
原生JS好久没用过了

{:1_165:}我叫淡漠 本名还记得？

398681207 发表于 2017-9-1 22:37:13

这代码是用来排列什么的？

残酷 发表于 2017-9-2 00:02:51

398681207 发表于 2017-9-1 22:37
这代码是用来排列什么的？

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

398681207 发表于 2017-9-2 21:55:16

残酷 发表于 2017-9-2 00:02
也不是自动排序，核心代码是insertBefore，可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码 ...

不明觉厉，支持一下先

紫霞吖 发表于 2017-9-3 14:53:36

看不懂                           

ohjfe 发表于 2019-4-26 13:50:44

创意哦！楼主高人啊 谢











static/image/common/sigline.gif
外贸公司实习报告
页: [1]
查看完整版本: 自動排序