原生js实现拖拽排序

思路

–拖动元素得到位置确定元素对应的数据，在数组中位置–

代码部分

css样式

* {
            margin: 0;
            padding: 0;
        }
        #drag{
            width: 300px;
        }
        .de-p {
            font-size: 20px;
            line-height: 80px;
            text-align: center;
            height: 80px;
            width: 80px;
            border: 1px solid #e2e2e2;
            background-color: rgba(16, 15, 245,.5);
            cursor: pointer;
            color: antiquewhite;
            float: left;
        }

        ._absolute {
            position: absolute;
            opacity: 0.3;
        }

        ._relative {
            position: relative;
        }

html

<div id="drag"></div>

js拖拽对象实例化

var list = [{
            name: '1'
        }, {
            name: '2'
        }, {
            name: '3'
        }, {
            name: '4'
        }, {
            name: '5'
        }, {
            name: '6'
        }, {
            name: '7'
        }, {
            name: '8'
        }, {
            name: '9'
        }]
        var drag = new Drag('drag', list)
        //九宫格
        drag.init({
            x: true,
            y: true
        },3)
        //横向拖动
        //drag.init({
          //  x: true,
          //  y: false
        //})
        //纵向拖动
       // drag.init({
       //     x: true,
       //     y: false
        //})

定义拖拽对象

function Drag(contentId, model_arr,prop) {
    var $content;//拖拽元素的父元素
    var $model_arr = model_arr;//绑定的数据
    var $prop =prop||{
        name: 'name',
        id: 'id'
    } //绑定数组中显示的属性值
    var $direction = {
        x: false,
        y: true
    }
    var $lineNum=0
    var _this = this
    this.init = function (obj,num) {
        if(obj){
            $direction = obj
        }
        if(num){
            $lineNum =num
        }
        setelement();
        setconetent();
    }
    function setelement() {
        $content = window.document.getElementById(contentId);
        setclass($content, '_relative')
        if (!$content) {
            alert('找不到id为' + contentId + '的元素')
        }
    }
    function setconetent() {
        $content.innerHTML = ''
        for (let i = 0; i < $model_arr.length; i++) {
            let p = document.createElement('p');
            // console.log($model_arr[i], $prop.name)
            p.innerText = $model_arr[i][$prop.name];
            p.setAttribute('index',i)
            setclass(p, 'de-p')
            _this.drag(p)
            $content.append(p)
        }
    }
    function setclass(ele, cname) {
        ele.classList.add(cname)
    }
    // 注册拖拽事件
     this.drag=function(element) {
        var target = element
        // 开始拖拽
        function dragstart(e) {
            console.log('开始拖拽',target)
            var space = getlocation(e)
            setclass(target, '_absolute')
            settargetLocation(space, target)
            dragmove()
        }
        // 拖拽中
        function dragmove() {
            console.log('拖拽中')
            window.document.onmousemove = function () {
                var space = getlocation(event)
                settargetLocation(space, target)
            }
        }
        // 拖拽结束
        function dragend() {
            var location_obj  = {
                x:0,
                y:0
            }
            if($direction.x){
                var left = parseInt(target.style.left)
                location_obj.x = Math.round(left/target.offsetWidth);
                location_obj.x = location_obj.x>0?location_obj.x:(0-location_obj.x)
            }
            if($direction.y){
                var top = parseInt(target.style.top)
                location_obj.y = Math.round(top/target.offsetHeight);
                location_obj.y = location_obj.y>0?location_obj.y:(0-location_obj.y)
            }
            console.log(location_obj)
            var loc;
            if($direction.y&&!$direction.x){
                loc = location_obj.y
            }else if(!$direction.y&&$direction.x){
                loc = location_obj.x
            }else{
                console.log($lineNum)
                loc = location_obj.y*$lineNum+location_obj.x
            }
            console.log(loc)
            var arr_index = target.getAttribute('index');
            var tempObj = $model_arr.splice(arr_index,1)[0]
            if(loc==0){
                $model_arr.unshift(tempObj)
            }else{
                $model_arr.splice(loc,0,tempObj)
            }
            _this.init()
        }
        target.onmousedown = function (e) { dragstart(e) }
        target.onmouseup = function () {
            console.log('拖拽结束')
            dragend()
        }
    }
    // 计算鼠标相对父元素的坐标
    function getlocation(e) {
        var location_par = {
            x: $content.offsetLeft,
            y: $content.offsetTop,
        }
        var location_mouse = {
            x: e.pageX,
            y: e.pageY,
        }
        var space = {
            x: location_mouse.x - location_par.x,
            y: location_mouse.y - location_par.y
        }
        return space;
    }
    function settargetLocation(space, target) {
        if ($direction.x) {
            target.style.left = (space.x - 20) + 'px'
        }
        if ($direction.y) {
            target.style.top = (space.y - 20) + 'px'
        }
    }
}