拖拽交换

作者 : 开心源码 本文共1962个字,预计阅读时间需要5分钟 发布时间: 2022-05-11 共194人阅读

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

需求

目录结构使用以下的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.删除元素时会有报错提醒,但是具体起因不是很清楚。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 拖拽交换

发表回复