原生实现DIV拖拽功能(修复)和搜索框的模糊查询

Posted 2021-08-31 三水草肃

项目场景：

筛选框增加拖拽功能。

---

问题描述：

拖拽功能增加之后，点击筛选框里面的数据进行筛选的时候会发生移位。

---

原因分析：

发生移位是因为点击筛选框里面的数据发生了拖拽，我写的拖拽功能是在整个筛选框中。

---

解决方案：

拖拽只在筛选框头部的位置可以拖拽，筛选框头部位置之后不可以进行拖拽。通过e.target里面的数据找到对应的头部的信息进行判断。

有个cursor:move

		let isDown,initListX,initListY;
        let draggableList = document.getElementById('hashreportDiv')
        draggableList.addEventListener('mousedown', function(e) {
            initListX = e.offsetX;
            initListY = e.offsetY;
            if(e.target.className == 'filter-title c') {
                isDown = true;
            }
            })
        document.addEventListener('mousemove', function(e) {
                if (isDown) {
                    draggableList.style.left = e.clientX - initListX  + 'px';
                    draggableList.style.top = e.clientY - initListY + 'px';
                }
            }) 
            draggableList.addEventListener('mouseup', function() {
                isDown = false;
        })

实现搜索框自身模糊查询