拖拽中怎么修复bug

最新推荐文章于 2023-10-26 11:35:53 发布
最新推荐文章于 2023-10-26 11:35:53 发布
阅读量329 收藏
点赞数
分类专栏： 个人心得 文章标签： 鼠标 box
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whqwyn/article/details/52796298
版权
本文介绍了拖拽原理，通过设置Box元素的position为absolute，并获取鼠标坐标和元素相对父级的位置，计算出鼠标与盒子的偏移量。在鼠标按下事件中更新Box的即时坐标，实现拖动效果。提供了一个案例代码，由作者王华桥分享。
摘要由CSDN通过智能技术生成

拖拽原理

设被拖动盒子为“Box”；
设iEvent=ev || event;
给Box设position：absolute样式；

鼠标坐标（iEvent.clientX和 iEvent.clientY）；
Box相对父级距离（Box.offsetLeft 和 Box.offsetTop）
计算出鼠标相对于盒子的距离（BoxX=iEvent.clientX-Box.offsetLeft 和 BoxY=iEvent.clientY-Box.offsetTop）

给Box添加鼠标按下事件：Box.οnmοusedοwn=function(){};

Box的即时坐标：
Box.style.left=iEvent.clientX-BoxX+’px’;
Box.style.top=iEvent.clientY-BoxY+’px’;

案列代码：

<!DOCTYPE html>
<html>
    <head
最低0.47元/天 解锁文章
王华桥
关注
专栏目录
JavaScript之修复拖拽的bug
周秦卿的博客
10-15 3283
简易的拖拽  需要用到的对象和事件: Event  对象 Event  对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用，函数不会在事件发生前被执行！ Event  对象的产生当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. onmousedow
react-beautiful-dnd - modal 里拖拽时，position错位问题
依雪的专栏
11-09 1296
transform on parent messes up dragging positioning 参考https://github.com/atlassian/react-beautiful-dnd/issues/128 <div id="draggable"></div> position: absolute; pointer-events: none; height: 100%; width: 100%; import React, { PureComponent } f
拖拽中怎么修复bug(霸哥)
sTranDed_的博客
10-12 538
让你试试被代码支配的恐惧 拖拽盒子代码： #box{background: red;height: 50px;width: 50px;position: absolute;} window.onload=function(){
当拖拽元素时遇到的各种问题，以及解决方法
qq_38409767的博客
08-27 1618
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置整个页面的元素都能拖动</title> <style type="text/css"> #box1 { width: 100px; height: 100...
position
baneju9157的博客
09-21 360
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 re...
html5 audio demo【修复拖动进度条bug】
08-08
为了修复拖动进度条时的bug，我们需要关注`<audio>`元素的`addEventListener`方法，监听`timeupdate`事件。当音频的播放位置发生变化时，这个事件会被触发。同时，我们也需要同步进度条的值： ```javascript ...
js-鼠标拖拽窗口bug修复
琳
10-12 1223
拖拽原理
position: absolute;与weui一起使用时出错失效，效果如fixed
icebns的博客
09-16 257
问题描述： 给img定位position: absolute（绝对定位）时失效，状如position: fixed; img父级等元素并没有设置定位相关属性，而如果去掉利用weui写的form则又恢复正常。 解决方案： 给页面body添加CSS属性： <body style="overflow: visible"> 即可解决。 ...
屏幕拖拽旋转转盘
萧然
12-12 720
如图，黄色圆形作为旋转对象，受外力绕圆心顺时针或逆时针旋转 简化模型： 图例： 以旋转对象的旋转中心为坐标原点建立坐标系： 当拖拽时施加力的作用点刚好在Y轴时，作用力的方向与物体旋转方向如上图所示，X轴同理。 当拖拽时施加力的作用点在第一象限时，以施加力的作用点为坐标原点建立子坐标系，作用力的方向(子坐标系中所在的象限)与物体旋转方向如下图所示，其他象限同理： ...
原生JS的drag事件实现元素拖拽的bug
weixin_51116314的博客
01-11 2317
项目场景： 最近做Uniapp项目，从服务器请求json数据时，console.log打印出的对象中有部分数据字段缺失 问题描述： 这是服务器的数据，总共包含六个字段 这个是控制台打印出的结果，少两个字段不说，连sex字段都错了 下面是代码：下拉刷新请求网络数据，而两个url都是一样（我直接复制的） onPullDownRefresh() { uni.request({ url:this.url, success:(res)=> { console.log(re
Xlua UI拖拽，从一点到另一点，拖拽过程中显示其他物体(其实我并不会定义标题)
Xlua UI拖拽，从一点到另一点，拖拽过程中显示其他物体(其实我并不会定义标题)
08-26 1080
这是我写的第二篇，因为吃了大亏，解决问题后尽快记录，希望可以帮助到你。 项目需求是这样的 从英雄列表中点击头像，再拖动到指定地点，中间会有预制体的生成。到达目标点后，重新生成预设并播放动画声音。这些需求暂不讨论，咱们先讲讲拖拽问题。 先上c#端的代码 IBeginDragHandler,IEndDragHandler,IDragHandler 先继承接口 private Actio...
Unity UGUI Canvas画布上的鼠标位置转化为世界坐标
Ezerbel的博客
04-09 689
public void OnDrag(PointerEventData eventData) { Debug.Log("On Drag " + eventData.pointerDrag); Vector3 worldPos; RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRect, eventData.position, uiCamera, out worldPos); Debug.Log("wo
Unity ScrollView手机滑动手感的问题
thinbug的专栏
12-16 1711
一直以来总是感觉Unity做的滚动列表在手机上滑动起来和原生的手感感觉不同，要么感觉不灵敏，要么感觉拖不动。 今天抽时间找下问题，看有没参数调整 ScrollView本身有几个参数可以调整，但是都不是那个感觉。 特别是快速滑动的时候，甚至滚动条可能根本连反应都没有。感觉他有一个阈值，但是没找到什么参数能来控制，后来找到在EventManager里有一个Dra，,但是设置成1了也没见到作用。 在On...
【Unity】UGUI EventSystem OnDrag 因为适配的问题，使用delta的XY作为加数移动造成误差的问题
喵喵丸的Blog
12-29 2332
问题发生 使用EventSystem的OnDrag事件，希望实现一个移动画幅【下文以Image指代】的功能。 比如游戏设计标准分辨率为 1920x1080，那么我们给出的CanvasScaler的标准尺寸就是1920*1080 在OnDrag的监听中 使用 PointerEventData 中 delta 的数据，分别取x,y加到Image的localPosition上面。 这样就可以做出一个简单的跟随拖动移动Image的需求。 然而，当分辨率切换为非设计尺寸， 我们会发现，Image的移动经常不能跟随鼠标
【Unity学习笔记】UI事件接口和参数PointerEventData
一白梦人的博客
06-16 9560
【事件接口】 零 事件接口作用：https://blog.csdn.net/eazey_wj/article/details/65632664 一 鼠标移入移出：https://blog.csdn.net/eazey_wj/article/details/65947037 二 鼠标按下抬起点击：https://blog.csdn.net/eazey_wj/article/details/66477004 三：拖拽、拖拽前、拖拽开始、拖拽结束、A拖到Bhttps://blog.csdn.net/eazey_
【Unity_UI】PointerEventData遇到一个很奇怪的情况
最新发布
weixin_61427881的博客
10-26 141
PointerEventData里面有一个hovered的属性，它记录了鼠标点击时覆盖到的UI游戏物体，但发现一个问题是，左键点击的时候能够读取到正确的结果，但右键点击时hovered中的对象为0
JS中鼠标拖拽div（1）（优化div在鼠标按下时平移的问题）
Fantasc的博客
08-11 1096
在前一节内容中，涉及到了鼠标如何拖拽div，但是在前一节的内容中，按下鼠标左键要拖动的div的时候，div的右上角总会跑到鼠标点击的位置，为了优化拖拽的体验，做了如下修改： 在点击鼠标拖拽div的时候，div的左上角不会跑到鼠标点击的位置来，点击的是div的什么位置，就在什么位置拖拽div。分析图如下： 思路分析： 在鼠标点击div的之前，div处于红色框的位置，在鼠标触发mousedown的那一刻，前一节的内容中，如果鼠标点击的是蓝色点的位置，红色div框会根据鼠标单击的位置做平行移动，红色框的左上
JIRA配置 (1) - 个性化定制项目之问题类型方案配置
weixin_43387629的博客
12-03 888
JIRA配置 (1) - 个性化定制项目 刚被授予了JIRA管理员的权限,这不就来任务了,作为JIRA使用的半个小白,开始琢磨怎么把项目提出的这个需求给实现了,下面来回忆一下自己配置的整个过程. JIRA项目配置需求: 1.要求创建一个JIRA项目; 2. 这个JIRA项目仅仅是用来给产品经理记录线上环境问题的; 3. 主要由测试人员维护跟进 注:以下所有配置基于JIRA V8.13.0 1.1 创建JIRA项目 一个项目是对一系列相关问题类型的综合管理 . 在JIRA中,可以通过以下方式创建项目. 首先,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值