拖拽交换

面试的时候碰到过这样一个问题

需求

目录结构用以下的html文件

<ul id="content">
    <li class="list-item">1</li>
    <li id="add-li">+</li>
</ul>

首先是右键的自定义点击事件，事件名为contextmenu，绑定到所需要删除的元素块里，取消默认事件。

dom.oncontextmenu=function (e) {
 //e.button判断鼠标的按键
  if (e.button == 2){
    e.preventDefault();
   //这里是需要执行的语句
  } 
}

然后模拟快捷菜单，思路就是在指针位置弹出一个列表，将对话框设为position:absolute，每次点击的改变其定位，获取指针的地方为(e.clientX,e.clientY)

添加元素和删除元素调用removeChild()和insertBefore()，需注意的是新添加的元素也得绑定所有的事件。

另外一个难点就是拖拽事件的，鼠标点击事件有三个阶段mousedown，mousemove，mouseup。mousedown的时候，获取当前位置，这里使用offsetLeft和offsetTop表示，然后在mousemove的时候监听鼠标位置，然后设定top和left的值，这样每个元素都要设置为绝对定位，所以初始化的时候要通过js来设定列表的位置。

   function init() {
        var lis = content.getElementsByTagName('li')
        for (let i = 0;i<lis.length;i++){
            lis[i].style.left = i%4*120+'px';
            lis[i].style.top = Math.floor(i/4)*120+'px';
        }
    }

当然，鼠标点击的时候也需要判断，不然会和之前绑定的contextmenu冲突，(左键的e.button=0)，在mouseup的时候还要注意取消之前mousemove的事件，不然就会鼠标松开后还一直移动。

这里有个简单的拖拽demo(这里没有判断e.button的值)

var startX, startY, moveX, moveY, x, y;
        box.onmousedown = function (e) {
            startX = e.clientX;
            startY = e.clientY;
            x = box.offsetLeft;
            y = box.offsetTop;
            //为了避免拖动出box，事件绑定在document上
            document.onmousemove = function (e) {
                moveX = e.clientX - startX
                moveY = e.clientY - startY
                box.style.left = x + moveX + 'px';
                box.style.top = y + moveY + 'px';
            }
            document.onmouseup = function () {
                //移除后移除拖动事件
                document.onmousemove = function () {
                    return false
                }
            }
        }

最后就是拖拽的交换判断，这里我做的处理是被拖拽的元素的左上角拖拽到某元素的右下角时，如果满足，就交换元素里面的内容，然后被拖动的元素恢复到原始位置。

    function getSwap() {
        areaArr=[];
        for (var i = 0;i<listArr.length;i++){
            var left = listArr[i].offsetLeft;
            var top = listArr[i].offsetTop;
            areaArr.push({index:i,leftmin:left+50,topmin:top+50,leftmax:left+100,topmax:top+100})
        }
    }

    function swapNum(dom) {
        // 获取元素节点的交换区域

        for(var i=0;i<areaArr.length;i++){
            if (domleft>=areaArr[i].leftmin&&domleft<=areaArr[i].leftmax&&domtop>=areaArr[i].topmin&&domtop<=areaArr[i].topmax) {
                console.log(areaArr[i].index)
                var target= listArr[i].innerText
                listArr[i].innerText = dom.innerText
                dom.innerText = target
            }
        }

    }

传入dom进行判断，然后
完整demo放在了下面的页面：https://github.com/SNJiang1992/somedemo/blob/master/dragswap.html

待优化的部分：
1.绑定事件可以做一个封装，后段创建了一个新的元素后，绑定事件又重复了一遍。
2.删除元素时会有报错提示，但是具体原因不是很清楚。