（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

最新推荐文章于 2023-03-16 08:40:57 发布
最新推荐文章于 2023-03-16 08:40:57 发布
阅读量272 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/115047375
版权
  • 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
  • mousedown事件触发后，开始拖拽
  • mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
  • mouseup时，拖拽结束
  • 需要注意浏览器边界的情况
LuckXinXin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js部分面试题
猿飞梦的博客
10-18 335
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> </head
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
实现一个对页面中某个节点的拖拽
Fairy的博客
11-26 2829
今天看到一道面试题：实现一个对页面中某个节点的拖拽 虽然以前写过这样的代码，但是今天再次思考的时候，发现任然值得去重新code一遍； 要点： mousedown，mouseover，mouseup 在mousedown之后，事件开始触发； 执行mouseover时，需要通过event.clientX和event.clientY来获取获取拖拽位置的坐标（需要考虑边界情况） mouseup...
【设计题】想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
php_martin的博客
08-01 410
想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
LuckXinXin的博客
06-18 780
给需要拖拽的节点绑定mousedown, mousemove, mouseup事件 mousedown事件触发后，开始拖拽 mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置 mouseup时，拖拽结束 需要注意浏览器边界的情况 ...
js实现一个对页面某个节点的拖曳
VirgoYellow 的专栏
04-30 1059
js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。 一、js拖拽插件的原理 常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤： 用鼠标点击被拖拽的元素 按住鼠标不放，移动鼠标 拖拽元素到一定位置，放开鼠标 这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是： 用鼠标点击被拖拽的元素触发onmousedown （1）设置当前元素的可拖拽为true，表示可以拖拽 （2）记录当前鼠标的坐标x,y （3）记录当前元素
对页面某个节点的拖曳（原生js和vue项目）
一个在离前端越来越远的前端人员
12-03 916
HTML5中的draggable draggable 属性规定元素是否可拖动（链接和图像默认是可拖动的。） /// true:规定元素是可拖动的,false:规定元素是不可拖动的,auto:使用浏览器的默认特性。 <element draggable="true|false|auto"> 在拖放的过程中会触发以下事件： 在拖动目标上触发事件 (源元素): ondragstart -...
2019最新出炉 js面试题 都是精华内容
weixin_44374408的博客
01-08 7742
foo = foo||bar ，这行代码是什么意思？为什么要这样写？ 如果foo存在，值不变，否则把bar的值赋给foo。 短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时， 只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。 看下列代码，将会输出什么?(变量声明提升) var foo = 1; (functi...
js面试题整理
计算机源码之家的博客
09-27 578
1.js基础 1.eval是做什么的？ 它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')'); 2.什么是window对象? 什么是document对象? window对象是指浏览器打开的窗...
面试题集锦
weixin_38289699的博客
04-19 911
一、HTML和CSS你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)每个HTML文件里开头都有个很重要的东西，D...
js实现层的拖曳，很实用的哦
11-25
有两种方法，研究了好久，所以就算给个辛苦劳动分吧，哈哈
原生js实现对某一个结点的拖拽
The_upside_of_down的博客
04-11 215
// HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。 // HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。 // MouseEvent.clientX 是只读属性， 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。 window.onload =
用javascript实现页面某个节点的拖拽
sweet_cicada的博客
03-13 3157
主要利用onmousedown()、onmousemove()、onmouseup()三个事件，当鼠标按下，物体被选中，然后进行移动，可以在页面上向各个方向进行移动，当抬起鼠标时，物体停止移动 body { padding: 0; margin: 0; } #box { width: 200px;  height:200px; background-co
原生js实现节点拖拽
zp1996323的博客
12-07 3502
因为项目要用到拖拽，所以写了一个拖拽函数来与大家分享下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="拖拽">
如何实现原生 JS 的拖拽效果
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-16 1124
前言: 关于“拖拽”，其实是一个老生常谈的需求了，并且还是一个非常经典的面试题。之前在项目中拖拽的场景都是直接使用轮子，虽然很快就能完成设计需求，但是这个的原理一直都是我十分想去深入了解的一部分。正好在今天的项目中再一次碰到了这个需求，我觉得是时候去探索一下它了。tips: 本文不会使用 Draggable 去实现，而是会采用原生的 JS 鼠标移动，鼠标点击等事件去完成。并且你需要明确知道的一点是...
js面试题
weixin_41266588的博客
02-15 374
js面试题 1.用js代码简单的介绍下自己（包括姓名、经历、技能）、 &lt;script&gt;     function Person(name,jingli,jineng) {       this.name=name;       this.jingli=jingli;       this.jineng=jineng;     }     Person.prototype.show=f...
JavaScript基础知识整理（1）
weixin_33749242的博客
09-08 124
1、JavaScript数据类型有哪些？ 基本数据类型：Number、String、Boolean、Null、Undefined 引用数据类型：Object（Array、Date、RegExp、Function） 那么问题来了，如何判断某变量是否为数组数据类型？ 判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义sli...
原生JS 实现页面元素的拖动 拖拽
我是张跑跑
12-06 1183
原生JS 实现页面元素的拖拽 1.
Web前端面试题目及答案汇总
哲洛不闹的专栏
03-18 3604
阅读目录HTML/CSS部分JavaScript部分其他HTML/CSS部分1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（con...
我想用d3.js实现一个可以自定义的技能树页面
最新发布
08-05
### 回答1： 我可以提供一些建议：1. 使用d3.js的数据可视化功能，可以让你的技能树页面更加生动有趣；2. 使用d3.js的交互功能，可以让你的技能树页面更加灵活，用户可以自定义它们的技能树；3. 使用d3.js的动画功能，可以让你的技能树页面更加生动，让用户更容易理解和记忆它们的技能树。 ### 回答2： 使用d3.js来实现一个自定义的技能树页面是可行的。d3.js是一个流行的JavaScript库，用于创建动态、交互式的数据可视化。下面是实现这个页面的一般步骤： 1. 设计数据结构：定义一个数据结构来存储技能树的节点和连接信息。每个节点应该具有唯一的标识符、名称、描述以及与其他节点的连接关系。 2. 创建画布：使用d3.js创建一个SVG画布来承载技能树。可以设置画布的宽度和高度来适应所需的展示区域。 3. 加载数据：将之前定义的数据结构加载到页面中。这可以通过从本地文件或通过Ajax请求获取远程数据来完成。 4. 渲染节点：使用d3.js的选择集来选择所有节点元素，并将其添加到SVG画布上。可以根据节点的数据绑定来设置节点的位置、样式和大小。 5. 绘制连接：使用d3.js的选择集来选择所有连接元素，并将其添加到SVG画布上。可以使用直线或曲线表示两个节点之间的连接。 6. 实现交互：使用d3.js的事件处理功能来实现节点和连接的交互。例如，可以通过点击节点来展开或收起子节点，或者通过鼠标悬停来显示详细信息。 7. 添加用户界面：为用户提供自定义能力的功能。可以使用HTML表单元素来让用户添加、修改或删除节点和连接。 8. 样式美化：使用CSS样式表来美化技能树页面，并根据个人喜好进行自定义。 总结起来，通过d3.js实现一个自定义的技能树页面需要设计数据结构、创建画布、加载数据、渲染节点、绘制连接、实现交互、添加用户界面和样式美化等步骤。通过这些步骤，可以实现一个具有自定义能力的交互式技能树页面。 ### 回答3： 使用d3.js实现一个可以自定义的技能树页面，可以按照以下步骤进行： 1. 准备数据：首先需要准备技能树的数据，可以使用JSON格式存储每个技能及其相关属性，例如技能名称、描述、所需等级等。 2. 创建画布：使用d3.js创建一个SVG画布，用于展示技能树页面。 3. 绘制节点：根据技能数据，使用d3.js绘制技能树的节点。你可以通过绘制圆形、矩形等形状来表示每个技能。 4. 连接节点：使用d3.js的连接函数，将各个节点连接起来，形成技能树的结构。可以通过绘制直线或曲线来连接节点。 5. 添加文字和图标：根据技能数据，使用d3.js添加节点上的文字和图标。可以根据需要设置字体大小、颜色，并添加适当的图标来表示不同类型的技能。 6. 添加交互效果：使用d3.js的事件处理函数，为节点添加交互效果。例如，当鼠标悬停在节点上时，显示该技能的详细信息；点击节点时，可以展开或收起相关联的技能。 7. 自定义技能树：提供一个界面，让用户可以自定义技能树的结构和属性。例如，可以添加新的技能节点、修改技能节点的属性等。通过监听用户的操作，实时更新技能树的展示。 8. 美化页面：根据需求，使用CSS样式来美化技能树页面，使其更加吸引人。 通过以上步骤，你可以使用d3.js实现一个可以自定义的技能树页面，用户可以根据自己的需求设计和展示自己的技能树。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值