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

项目场景:

筛选框增加拖拽功能。


问题描述:

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

原因分析:

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

解决方案:

拖拽只在筛选框头部的位置可以拖拽,筛选框头部位置之后不可以进行拖拽。通过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;
        })

实现搜索框自身模糊查询

在这里插入图片描述

在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 我可以提供一些指引:要实现拖拽div,你首先需要监听div的mousedown,mouseup和mousemove事件。然后记录鼠标的坐标,并通过改变div的CSS left和top属性来实现div拖拽。 ### 回答2: 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div功能。以下是一个简单的示例: 首先,在 HTML 中添加一个可拖拽div 元素: ``` <div id="draggableDiv" draggable="true">可拖拽div</div> ``` 在 JavaScript 中,我们可以通过监听一些事件来实现拖拽的效果。首先,我们需要监听 div 的 mousedown 事件,当鼠标按下开始拖拽。然后,我们需要监听鼠标移动事件来更新 div 的位置。最后,在鼠标抬起停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中,我们通过计算鼠标点击位置与 div 左上角的偏移量,然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发,从而使得 div 跟随鼠标的移动而移动。最后,当鼠标抬起,我们需要移除事件监听,停止拖拽。 通过以上代码,我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动div 会跟随鼠标的移动而移动,当鼠标抬起停止拖拽。 ### 回答3: 要实现拖拽div的效果,可以使用原生JavaScript来完成。具体步骤如下: 1. 首先,在HTML中创建一个div元素,并给它设置一个id,用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中,创建一个变量来保存当前被拖拽div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器,当鼠标按下,开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中,记录鼠标按下的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数,在该函数中,根据鼠标移动的距离,更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数,在该函数中,移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤,我们就可以实现一个简单的原生JavaScript拖拽div效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值