使用 HTML5 拖放写一个拖动排序


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>draggable demo</title>
    <style media="screen">
        * { padding: 0; margin: 0;}
        .u-table-box { width: 1376px;background-color: #F3F5F7; color: #444; font-family: sans-serif; user-select: none;}
        ul { display: table; table-layout: auto;width: 100%; border-collapse: collapse;}
        li { height: 30px; line-height: 30px; display: table-row;}
        li > span { display: table-cell; width: auto; }
        li > span:first-child { padding-left: 20px;}
        .thead { background-color: #E3F1D1; border-bottom: 1px solid #BFCFDA;}
        .tbody { background-color: #F4FAED; border-bottom: 1px solid #BFCFDA;}
    </style>
</head>
<body style="">
    <div class="u-table-box">
        <ul class="u-table">
            <li class="thead">
                <span>Name</span>
                <span>Age</span>
                <span>Sex</span>
                <span>Sort</span>
            </li>
            <li class="tbody" draggable="true">
                <span>Mr.Zhang</span>
                <span>22</span>
                <span>Man</span>
                <span class="sort">1</span>
            </li>
            <li class="tbody" draggable="true">
                <span>Miss.Liu</span>
                <span>25</span>
                <span>Woman</span>
                <span class="sort">2</span>
            </li>
            <li class="tbody" draggable="true">
                <span>Mr.Wang</span>
                <span>28</span>
                <span>Man</span>
                <span class="sort">3</span>
            </li>
            <li class="tbody" draggable="true">
                <span>Miss.Pan</span>
                <span>22</span>
                <span>Woman</span>
                <span class="sort">4</span>
            </li>
            <li class="tbody" draggable="true">
                <span>Mr.Xin</span>
                <span>23</span>
                <span>Man</span>
                <span class="sort">5</span>
            </li>
            <li class="tbody" draggable="true">
                <span>Mr.Zhou</span>
                <span>24</span>
                <span>Man</span>
                <span class="sort">6</span>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        window.onload = function() {
            var currentDom;
            var endDom;
            var dom = document.querySelector('.u-table');

            // 开始拖动
            dom.addEventListener('dragstart', function (e){
                if (e.target.className != 'tbody') return;

                e.target.style.opacity = 0.5;
                currentDom = e;
            }, false);

            // 放到何处
            dom.addEventListener('dragover', function (e){
                if (e.target.className != 'tbody') return;


            }, false);

            // 当可拖动的元素进入可放置的目标高亮目标节点
            dom.addEventListener("dragenter", function(e) {
                // 当可拖动的元素进入可放置的目标高亮目标节点
                if (e.target.parentNode.className == "tbody") {
                    e.target.parentNode.style.opacity = .3;
                    e.target.parentNode.style.backgroundColor = "#FF6600";
                }
            }, false);

            // 当拖动元素离开可放置目标节点,重置其背景
            dom.addEventListener("dragleave", function(e) {
                // 当拖动元素离开可放置目标节点,重置其背景
                if (e.target.parentNode.className == "tbody") {
                    e.target.parentNode.style.opacity = '';
                    e.target.parentNode.style.backgroundColor = '';

                    endDom = e.target.parentNode;
                }
            }, false);

            // 进行放置
            dom.addEventListener('drop', function (e){
                if (e.target.className != 'tbody') return;


            }, false);

            // 结束托放
            dom.addEventListener("dragend", function(e) {
                if (e.target.className != 'tbody') return;
                // 重置透明度
                e.target.style.opacity = '';
                dom.insertBefore(currentDom.target, endDom.nextSibling);
                sort();
            }, false);
        }

        function sort() {
            var size = document.getElementsByClassName('sort').length;
            for(var i = 0; i < size; i++) {
                document.getElementsByClassName('sort')[i].innerText = i + 1;
            }
        }
    </script>
</body>
</html>

以上是全部代码;

下面是效果:

拖动排序


博主很懒,什么也没写!