美文网首页
js drag拖动排序

js drag拖动排序

作者: 虎虎虎呼呼 | 来源:发表于2017-09-06 14:02 被阅读0次

    这次来做一个拖动排序,带有动画效果,先上效果图,不熟悉拖动api的可以查看链接

    效果图
    在线演示:http://jsrun.net/XpiKp/edit

    思路(先不考虑动画)

    每个li既是可拖动,同时也是容器,拖动到li上面时移动拖动的li。
    先把html写好

    <ul>
            <li class="ele" draggable="true">1</li>
            <li class="ele" draggable="true">2</li>
            <li class="ele" draggable="true">3</li>
            <li class="ele" draggable="true">4</li>
            <li class="ele" draggable="true">5</li>
            <li class="ele" draggable="true">6</li>
            <li class="ele" draggable="true">7</li>
            <li class="ele" draggable="true">8</li>
        </ul>
    

    css

    ul {
            list-style: none;
            margin: 200px;
            font-size: 0;
        }
        .ele {
            font-size: 16px;
            width: 100px;
            height: 40px;
            border: 1px solid #999;
            background: #EA6E59;
            margin: 2px 0;
            border-radius: 10px;
            padding-left: 10px;
            color: white;
            cursor: move;
        }
    

    下面添加事件,由于拖动是实时的,所以没有使用drop而是使用了dragover。并且用一个变量来保存当前拖动的元素。这里直接使用事件委托,直接使用ul来监听

    var node = document.querySelector("#container");
    var draging = null;
    //使用事件委托,将li的事件委托给ul
    node.ondragstart = function(event) {
        /firefox设置了setData后元素才能拖动!!!!
            event.dataTransfer.setData("te", event.target.innerText); //不能使用text,firefox会打开新tab
            draging = event.target;
        }
    node.ondragover = function(event) {
            event.preventDefault();
            var target = event.target;
        //因为dragover会发生在ul上,所以要判断是不是li
            if (target.nodeName === "LI"&&target !== draging) {
                    //_index是实现的获取index              
                    if (_index(draging) < _index(target)) {
                        target.parentNode.insertBefore(draging, target.nextSibling);
                    } else {
                        target.parentNode.insertBefore(draging, target);
                    }
            }
        }
    
    

    接下来就是移动正在拖动的li了,当前li的index大于容器li时就插入在容器的前面,反之插入在容器的后面,那么怎么获取当前li的index呢?Node有一个属性previousElementSibling,表示该元素前面的一个元素,那么我们可以这样

    function _index(el) {
            var index = 0;
            if (!el || !el.parentNode) {
                return -1;
            }
            while (el && (el = el.previousElementSibling)) {
                index++;
            }
            return index;
        }
    

    好的,基本的排序就做好了,在线演示地址http://jsrun.net/GkiKp/edit

    动画

    好了,先讲思路,动画其实不需要给所有元素都添加,只需要给移动的元素和目标元素添加动画就够了,例如我们交换了1和2的位置,那么就给1和2添加动画。这种添加动画的思路是通用的,比如可以做元素的页面进入动画。

    1和2

    我们可以记录1和2交换之前的位置,然后获取交换之后的位置,然后让元素从原位置慢慢移动到目标位置。
    图片表示


    图片表示

    那么我们先获取初始位置,肯定是在移动元素之前进行获取,那么我们在dragover移动元素之前加上

    var targetRect = target.getBoundingClientRect();
    var dragingRect = draging.getBoundingClientRect();
    

    然后在交换位置之后再次获取元素位置

    var targetAfter = target.getBoundingClientRect();
    var dragingAfter = draging.getBoundingClientRect();
    

    位置还原

    先获取两者的差,然后就可以为其添加transform,由于我们需要将元素瞬间移动到原来的位置,所以我们需要将其transition设为none

    target.style.transition='none';
    target.style.transform='translate3d(' +
                    (targetRect.left - targetAfter.left) + 'px,' +
                    (targetRect.top - targetAfter.top) + 'px,0)'
    
    //draging同理
    

    然后就可以再设置transform进行移动,这里如果直接设置的话,当然动画是无法显示的,原因可以看这里

    target.offsetWidth; //触发重绘
    target.style.transition='all 300ms';
    target.style.transform='translate3d(0,0,0)';
    

    还有一个问题

    由于我们的动画是添加在dragover里面,然而dragover是会不停的触发,加过就是元素不停“抽搐”,所以我们需要判断元素是否已经添加了动画。这个的话方法就很多了,这里我是设置了一个定时器,事件到了之后将transition和transform清空,设置动画之前进行判断定时器是否已经存在

    clearTimeout(target.animated);
    target.animated = setTimeout(function() {
    target.style.transition='';
    target.style.transform='';
    target.animated = false;
    //draging同理
    }, ms);
    

    相关文章

      网友评论

          本文标题:js drag拖动排序

          本文链接:https://www.haomeiwen.com/subject/bjxjjxtx.html