面试的时候碰到过这样一个问题
需求
目录结构使用以下的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放在了下面的页面： SNJiang1992/somedemo/blob/master/dragswap.html
待优化的部分：
1.绑定事件能做一个封装，后段创立了一个新的元素后，绑定事件又重复了一遍。
2.删除元素时会有报错提醒，但是具体起因不是很清楚。
