native JS sort div !

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drag demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        
        #app {
            position: relative;
            width: 100%;
            height: 100%;
            max-width: 980px;
            margin: auto;
        }
        
        .list {
            padding: 10px;
            height: 20px;
            border-bottom: 1px solid #ddd;
        }
        
        #recycle {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background: #ddd;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main">
            <div class="list" draggable="true">a这里是列表1的标题</div>
            <div class="list" draggable="true">b这里是列表2的标题</div>
            <div class="list" draggable="true">c这里是列表3的标题</div>
            <div class="list" draggable="true">d这里是列表4的标题</div>
            <div class="list" draggable="true">e这里是列表5的标题</div>
            <div class="list" draggable="true">f这里是列表6的标题</div>
            <div class="list" draggable="true">g这里是列表7的标题</div>
        </div>
        <div id="recycle">回收站</div>
    </div>
    <script src="./sortable.js"></script>
    <!-- <script src="http://timruffles.github.io/ios-html5-drag-drop-shim/ios-drag-drop.js"></script> -->
</body>

</html>

js

// shim ???
var iosDragDropShim = {
    enableEnterLeave: true
};
// 兼容移动端
var source = document.querySelectorAll('.list'),
    recycle = document.getElementById('recycle'),
    dragElement = null,
    // 用于存放拖动元素
    lock = true; 
    // 最后元素拖放拖放时会进入enter和leave的循环，用来锁住

for(var i = 0; i < source.length; i++){
    source[i].addEventListener('dragstart',function(ev){
        dragElement = this;
        // 用于存放拖动元素
        this.style.backgroundColor = '#f8f8f8';
        // 设置拖动元素的背景
    },false);

    source[i].addEventListener('dragend',function(ev){
        ev.target.style.backgroundColor = '#fff';
        // 拖放结束还原拖动元素的背景
        ev.preventDefault();
    },false)

    source[i].addEventListener('dragenter', function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
            // 把拖动元素添加到当前元素的前面
        }
    }, false)

    source[i].addEventListener('dragleave', function(ev){
        console.log(111);
        if(dragElement != this){
            if(lock && (this == this.parentNode.lastElementChild || this == this.parentNode.lastChild)){
                // 当前元素时最后一个元素
                this.parentNode.appendChild(dragElement);
                // 把拖动元素添加最后面
                lock = false;
            }else{
                lock = true;
            }
        }
    }, false)
};

/* recycle ondrop */
recycle.addEventListener('drop', function(ev){
    // 拖进回收站则删除该元素
    dragElement.parentNode.removeChild(dragElement);
    // parentNode.removeChild
}, false)

document.ondragover = function(e){
    // 必须设置dragover阻止默认事件
    e.preventDefault();
}
document.ondrop = function(e){
    e.preventDefault();
}

xgqfrms-GitHub/HTML-li-Tag.md Secret

xgqfrms-GitHub commented Oct 31, 2017

Uh oh!

xgqfrms-GitHub commented Oct 31, 2017

Uh oh!

xgqfrms-GitHub/HTML-li-Tag.md Secret

xgqfrms-GitHub commented Oct 31, 2017

native JS sort div !

Uh oh!

xgqfrms-GitHub commented Oct 31, 2017

auto save ???

Uh oh!