原生拖拽数组

最新推荐文章于 2022-01-05 19:57:29 发布

zhoutingxixi

最新推荐文章于 2022-01-05 19:57:29 发布

阅读量183

点赞数 1

分类专栏： es6 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_43844696/article/details/112778778

版权

es6 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

展示图：

拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        list-style: none;
        margin: 300px auto;
        width: 200px;
    }

    .ele {
        width: 100%;
        height: 40px;
        border: 1px solid #999;
        background: pink;
        margin-top: 2px;
        border-radius: 10px;
        padding-left: 10px;
        color: white;
        cursor: move;
    }
</style>
<body>
    <ul id="container"></ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
var arr = ['1','2','3','4']
$.each(arr, function (index, v) {
    $(`<li class="ele" draggable="true">${v}</li>`).appendTo($('#container'))
});
var node = document.querySelector("#container");
var draging = null;
//使用事件委托，将li的事件委托给ul
node.ondragstart = function(event) {
        //console.log("start");
  			//firefox设置了setData后元素才能拖动！！！！
        event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
        //event.dataTransfer.setData("self", event.target);
        draging = event.target;
    }
node.ondragover = function(event) {
        //console.log("onDrop over");
        event.preventDefault();
        var target = event.target;
  			//因为dragover会发生在ul上，所以要判断是不是li
        if (target.nodeName === "LI") {
            if (target !== draging) {
                var targetRect = target.getBoundingClientRect();
                var dragingRect = draging.getBoundingClientRect();
                if (target) {
                    if (target.animated) {
                        return;
                    }
                }

                let temp = arr[_index(draging)];
                arr[_index(draging)] = arr[_index(target)];
                arr[_index(target)] = temp;
                console.log('更改后的arr:',arr)

                if (_index(draging) < _index(target)) {
                    target.parentNode.insertBefore(draging, target.nextSibling);
                } else {
                    target.parentNode.insertBefore(draging, target);
                }
                _animate(dragingRect, draging);
                _animate(targetRect, target);
            }
        }
    }
	//获取元素在父元素中的index
  function _index(el) {
        var index = 0;

        if (!el || !el.parentNode) {
            return -1;
        }

        while (el && (el = el.previousElementSibling)) {
            //console.log(el);
            index++;
        }

        return index;
    }

function _animate(prevRect, target) {
        var ms = 300;

        if (ms) {
            var currentRect = target.getBoundingClientRect();

            if (prevRect.nodeType === 1) {
                prevRect = prevRect.getBoundingClientRect();
            }

            _css(target, 'transition', 'none');
            _css(target, 'transform', 'translate3d(' +
                (prevRect.left - currentRect.left) + 'px,' +
                (prevRect.top - currentRect.top) + 'px,0)'
            );

            target.offsetWidth; // 触发重绘
            _css(target, 'transition', 'all ' + ms + 'ms');
            _css(target, 'transform', 'translate3d(0,0,0)');

            clearTimeout(target.animated);
            target.animated = setTimeout(function() {
                _css(target, 'transition', '');
                _css(target, 'transform', '');
                target.animated = false;
            }, ms);
        }
    }
	//给元素添加style
  function _css(el, prop, val) {
        var style = el && el.style;

        if (style) {
            if (val === void 0) {
                if (document.defaultView && document.defaultView.getComputedStyle) {
                    val = document.defaultView.getComputedStyle(el, '');
                } else if (el.currentStyle) {
                    val = el.currentStyle;
                }

                return prop === void 0 ? val : val[prop];
            } else {
                if (!(prop in style)) {
                    prop = '-webkit-' + prop;
                }

                style[prop] = val + (typeof val === 'string' ? '' : 'px');
            }
        }
    }
</script>
</html>

zhoutingxixi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生拖拽数组

拖拽效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul {
复制链接

扫一扫