拖拽，切换位置

  var div = document.getElementsByClassName('name')[0];
        // var arr = []; //  indexP 数值和 div次序的对应关系，交换顺序后再寄回换数组顺序


        initDrag({
            parentDom: div,
            num: 3,
            classList: 'age'
        }, {
            attrList: {
                id: 10,
                gmcc: 22
            }
        })

        /**
         *   父级中不能有  col-md-*的定位元素 position  如果没有将 以table body为参考

         pointer-events: none; 当元素包含iframe时，，父类的拖拽事件，将不会触发，，
         此css属性会将  实践和hover  取消


         * @param _parentDom 需相对定位
         * @param _num 阶数
         * @param _classList 需要添加的类名 字符串用空格分割
         */
        /**
         * @param base{
         *               parentDom 需相对定位
         *               num 阶数
         *               classList  需要添加的类名 字符串用空格分割
         *           }
         *
         * @param option{
         *               eventList{
         *                      type 类型:fn 引用方法
         *                  }
         *                  ...
         *               ],
         *               attrList{
         *                    attrName : value,
         *                    ....
         *               },
         *            }
         *
         */
        function initDrag(base, option) {

            var _parentDom = base.parentDom,
                _num = base.num,
                _classList = base.classList

            var _parentW = _parentDom.offsetWidth,
                _parentH = _parentDom.offsetHeight;

            var _sonW = Math.floor(parseInt(_parentW) / _num),
                _sonH = Math.floor(parseInt(_parentH) / _num),
                arr = [],
                isMove = false;

            createDiv();

            addEvent();

            function createDiv() {

                for (var i = 0; i < _num; i++) {

                    for (var j = 0; j < _num; j++) {

                        var div = document.createElement('div');

                        div.style.position = 'absolute';
                        div.style.width = _sonW + 'px';
                        div.style.height = _sonH + 'px';
                        div.style.transitionProperty = 'left,top';
                        div.style.transitionDuration = '0.3s';
                        div.style.cursor = 'pointer';

                        div.className = _classList;
                        div.indexP = i * _num + j;

                        arr.push(div);
                        // div.innerText = i * _num + j;
                        setPosition(i, j, div);
                        _parentDom.appendChild(div);
                    }
                }
            }

            function addEvent() {

                for (var i = 0; i < _parentDom.children.length; i++) {

                    if (option.attrList) {
                        setOption(option.attrList, _parentDom.children[i], i + 1);
                    }
                    if (option.eventList) {
                        setOption(option.eventList, _parentDom.children[i], '', true);
                    }

                    _parentDom.children[i].onmousedown = function(e) {

                        var tempDiv = this;

                        var _relativeL = e.pageX - _parentDom.offsetLeft - tempDiv.offsetLeft,
                            _relativeT = e.pageY - _parentDom.offsetTop - tempDiv.offsetTop;

                        console.log(_parentDom.offsetLeft)
                        tempDiv.style.zIndex = 9999;

                        document.onmousemove = move;

                        function move(e1) {
                            // 移动
                            tempDiv.style.left = e1.pageX - _parentDom.offsetLeft - _relativeL + 'px';
                            tempDiv.style.top = e1.pageY - _parentDom.offsetTop - _relativeT + 'px';
                            isMove = true;
                        }

                        tempDiv.onmouseup = function(e1) {
                            document.onmousemove = null;
                            this.onmouseup = null;
                            tempDiv.style.zIndex = 0;
                            if (isMove) {
                                var targetX = e1.pageX - _parentDom.offsetLeft;
                                var targetY = e1.pageY - _parentDom.offsetTop;

                                var originIndex = tempDiv.indexP;

                                changePosition(originIndex, getTargetIndex(targetX, targetY, originIndex));
                                isMove = false;
                            }
                            // document.removeEventListener('mousemove',move,false);

                        };
                    }
                }
            }

            function setOption(_obj, _dom, increment, _isAddEvent) {
                for (var prop in _obj) {

                    if (_obj.hasOwnProperty(prop)) {
                        if (_isAddEvent) {
                            _dom.addEventListener(prop, _obj[prop], 'fasle')
                        } else {
                            _dom.setAttribute(prop, _obj[prop] + increment);
                        }
                    }
                }
            }

            function getTargetIndex(_x, _y, _originIndex) {
                if (_x < 0 || _x > _parentW || _y < 0 || _y > _parentH) {
                    return _originIndex;
                }

                var l = Math.floor(_x / _sonW),
                    t = Math.floor(_y / _sonH);

                var targetIndex = t * _num + l;

                return targetIndex;
            }

            /**
             * @param _o  _t index 值 改变 自定义属性，，来改变位置
             */
            function changePosition(_o, _t) {
                var i = Math.floor(_o / _num),
                    j = _o % _num,
                    temp;

                if (_o === _t) {
                    setPosition(i, j, arr[_o]);
                    return;
                }

                var _tI = Math.floor(_t / _num),
                    _tJ = _t % _num;

                setPosition(i, j, arr[_t]);
                arr[_t].indexP = _o;

                setPosition(_tI, _tJ, arr[_o]);
                arr[_o].indexP = _t;
                temp = arr[_t];
                arr[_t] = arr[_o];
                arr[_o] = temp;
            }

            function setPosition(_i, _j, _dom) {
                _dom.style.left = _j * _sonW + 'px';
                _dom.style.top = _i * _sonH + 'px';
            }
        }