原生Js实现元素拖拽插入功能

这个是初始化的样子

 <ul class="wrapper" >
        <li draggable="true" style="background: coral;">1</li>
        <li draggable="true" style="background:red;">2</li>
        <li draggable="true" style="background: yellowgreen;">3</li>
        <li draggable="true" style="background: blue;">4</li>
        <li draggable="true" style="background: black;">5</li>
    </ul>

 <script>
        var ul = document.getElementsByTagName('ul')[0];
         		 document.getElementsByTagName('li');
         		 li.length;
        function bindEvntDrag(e) {
            for(var i = 0; i < len; i++) {
                li[i].addEventListener('dragstart', function(e) {
                var index = getIndex(this);
                e.dataTransfer.setData('data',index);
            });
            li[i].addEventListener('dragover', function(e) {
                e.preventDefault();
            });
            li[i].addEventListener('drop', function(e) {
                var i = e.dataTransfer.getData('data');
                console.log(i)
                    ul.insertBefore(li[i], this);
            });
            }
        
        }
        function getIndex(dom) {
            for( var i = 0; i < len; i++) {
                if(li[i] === dom) {
                    return i
                }
            }
        }
        bindEvntDrag();
    </script>

这是完成后的样子 可以随意拖拽了 比较简单的一个小功能了 这个也是学前前端的过程中写的一个小笔记加深印象。## 原生js实现元素拖拽功能