首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当元素单击追加到div时,如果再次单击,则从该div中移除并将其返回到它所在的确切位置

这个需求可以通过JavaScript来实现。首先,我们需要给目标元素添加一个点击事件监听器。当元素被点击时,我们可以通过以下步骤来实现追加和移除操作:

  1. 获取目标元素的父元素(即div)和目标元素的初始位置信息(例如,top和left坐标)。
  2. 将目标元素从div中移除。
  3. 创建一个新的空的div,并将其位置设置为目标元素的初始位置。
  4. 将目标元素追加到新的div中。
  5. 将新的div追加到目标元素的初始位置所在的父元素中。

以下是一个示例代码:

代码语言:txt
复制
// 获取目标元素和其父元素
var targetElement = document.getElementById('targetElement');
var parentDiv = targetElement.parentNode;

// 获取目标元素的初始位置信息
var initialTop = targetElement.offsetTop;
var initialLeft = targetElement.offsetLeft;

// 点击事件监听器
targetElement.addEventListener('click', function() {
  // 如果目标元素已经在div中,则移除它并将其返回到初始位置
  if (targetElement.parentNode === parentDiv) {
    parentDiv.removeChild(targetElement);
    targetElement.style.top = initialTop + 'px';
    targetElement.style.left = initialLeft + 'px';
    document.body.appendChild(targetElement);
  } else {
    // 否则,将目标元素追加到div中
    parentDiv.appendChild(targetElement);
  }
});

这段代码会将目标元素追加到div中,并在再次点击时将其移除并返回到初始位置。请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求快速创建、部署和扩展云服务器实例。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,可用于存储和管理各种类型的数据。了解更多信息,请访问:腾讯云对象存储

请注意,以上推荐的产品仅作为示例,实际选择应根据具体需求和情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 显示英雄列表

依次遍历这个列表,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是语法关键部分。 浏览器刷新之后,英雄列表出现了。...点击一个英雄,详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示在页面的底部了。...为什么这样是正常  selectedHero 为 undefined ,ngIf 从 DOM 移除了英雄详情。因此也就不用担心 selectedHero 绑定了。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄详情放回到 DOM 。...所以你只要在用户点击一个  把 .selected 类应用到元素上就可以了。 Angular  CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。

4.4K70

Angular 显示英雄列表

依次遍历这个列表,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是语法关键部分。 浏览器刷新之后,英雄列表出现了。...点击一个英雄,详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示在页面的底部了。...为什么这样是正常  selectedHero 为 undefined ,ngIf 从 DOM 移除了英雄详情。因此也就不用担心 selectedHero 绑定了。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄详情放回到 DOM 。...所选英雄颜色来自于你前面添加样式 CSS 类 .selected。 所以你只要在用户点击一个  把 .selected 类应用到元素上就可以了。

4K30

优化 React APP 10 种方法

它不应在第二个输入再次运行,因为它与前一个输入相同,应将结果存储在某个位置,然后在不运行函数(expFunc)情况下将其返回。 在这里,我们将使用useMemo挂钩为我们优化expFunc。...> ) } } 此应用程序将计算包含1M个元素数组总和,现在,如果我们在主线程执行了此操作,则主线程将一直挂起,直到遍历1M个元素计算了它们总和。...webpack遍历我们代码进行编译和捆绑到达React.lazy()和时会创建一个单独捆绑import()。...要重新渲染组件,React会将其先前数据(属性和上下文)与当前数据(属性和上下文)进行比较,如果它们相同,则不会进行重新渲染,但是如果存在差异,则组件并重新渲染其子级。...再次运行应用程序,输入2连续单击Click Me按钮,您将看到渲染一次,不再进行:) 看到,我们使用了shouldComponentUpdate方法来设置何时重新渲染组件,从而有效地提高了组件性能

33.8K20

JQuery最全常用方法指南

$(”元素名称”).text(); 获得该元素文本 $(”元素名称”).text(value); 设置元素文本值为value $(”元素名称”).toggleClass(class) 元素存在参数样式时候取消...,则触发指定第一个函数,再次点击同一元素,则触发指定第二个函数。...andSelf() 将前一个匹配元素集合添加到当前集合 取得所有div元素和其中p元素,添加border类属性。...$(”div: contains(’John’)”) 匹配含有指定文本所有元素 $(”td: empty”) 匹配所有空元素(只含有文本元素不算空元素) $(”div: has§”) 从原元素集合再次匹配所有至少含有一个...与$(fn)等价 (3)toggle(evenFn, oddFn): 每次点击切换要调用函数。如果点击了一个匹配元素,则触发指定第一个函数,再次点击同一元素,则触发指定第二个函数。

10.9K20

如何使用AngularJS和PHP为任何位置生成短而独特数字地址

将其复制并存储在可以轻松检索位置,因为稍后您需要将其加到项目代码。 获取API密钥后,您可以通过创建MySQL数据库来开始构建应用程序基础。...在浏览器再次访问应用程序,然后在第一个字段输入状态名称。将文本光标移动到下一个字段,不会显示纬度和经度标签,地图上显示位置也不会更改以反映您输入信息。让我们启用这些行为。...一个blur在一个给定页面元素失去焦点发生事件。将以下突出显示行添加到form块input标记。...如果再次在浏览器访问应用程序,则不会看到其外观或行为任何新变化。同样,如果您要输入地址单击“ 生成”按钮,则应用程序仍然不会生成或显示地图代码。...每当用户单击Generate按钮,index.php文件代码都会提交表单调用processForm函数,该函数在以下createDigitalAddressApp.js位置定义: . . .

13.1K20

jQuery 事件

什么是事件 页面对不同访问者响应叫做事件。 事件处理程序指的是 HTML 中发生某些事件所调用方法。...方法给 API 带来很多便利,我们推荐使用方法,简化了 jQuery 代码库。 提示:如需移除事件处理程序,请使用Off()方法。... 移除事件 off() 方法通常用于移除通过 on() 方法添加事件处理程序。...方法给 API 带来很多便利,我们推荐使用方法,简化了 jQuery 代码库。 注意:如需移除指定事件处理程序,当事件处理程序被添加,选择器字符串必须匹配 on() 方法传递参数。...() event.namespace 返回当事件被触发指定命名空间 event.pageX 返回相对于文档左边缘鼠标位置 event.pageY 返回相对于文档上边缘鼠标位置 event.preventDefault

2.8K70

AngularDart4.0 英雄之旅-教程-07路由 顶

RouterLink指令告诉路由在用户点击链接位置。 您使用链接参数列表定义了一个路由指令, 这个列表在我们小样本只有一个元素,引用路由名称。... * ngFor再次用于遍历英雄列表显示他们名字。...之前,您从HeroesComponent提供程序列表删除了HeroService,并将其加到AppComponent提供程序列表。...刷新浏览器开始点击。 用户可以在应用程序周围进行导航,从仪表板到英雄详细信息,然后返回,从英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。...你所要做就是定义风格。 应用程序全局样式 将样式添加到组件,可以将组件需要所有内容(HTML,CSS和代码)一起放在一个方便位置。 把打包起来很容易,在其他地方重新使用组件。

17.5K30

AngularDart4.0 英雄之旅-教程-04明细 顶

在此页面,您将扩展“Tour of Heroes”应用程序,以显示英雄列表,允许用户选择英雄显示英雄详细信息。 完成此页面后,应用应该看起来像这个实例(查看源代码)。...如果结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果应用尚未运行,请启动应用。 您进行更改时,请通过重新加载浏览器窗口来保持运行。... ngFor前缀(*)是此语法关键部分。 表示元素及其子元素构成一个主模板。...刷新浏览器,应用程序不再失败,名称列表再次显示在浏览器没有选定英雄,ngIf指令从DOM移除英雄详情HTML。 没有英雄细节元素或绑定担心。...在模板,将以下绑定添加到标记: [class.selected]="hero === selectedHero" 表达式(hero === selectedHero)为true,Angular

3K30

JavaScript 编程精解 中文第三版 十九、项目:像素艺术编辑器

为了保持颜色字段显示正确颜色,工具必须知道存在,并在每次选择新颜色对其进行更新。 如果你添加了另一个让颜色可见地方(也许鼠标光标可以显示),你必须更新你改变颜色代码来保持同步。...创建元素,每个工具带有一个选项,设置"change"事件处理器,用于在用户选择不同工具更新应用状态。...赶上长度,没有剩下未探测像素,并且该函数就完成了。 最终工具是一个颜色选择器,允许你指定图片中颜色,来将其用作当前绘图颜色。...为了让浏览器真正下载图片,我们将创建一个链接元素,指向此 URL 具有download属性。 点击这些链接后,浏览器将显示一个文件保存对话框。 我们将该链接添加到文档,模拟点击,然后再将其删除。...alpha 分量表示不透明度 - 它是零像素是完全透明它是 255 ,它是完全不透明。出于我们目的,我们可以忽略

3K10

AngularDart4.0 指南- 模板语法二 顶

NgFor:为列表每个项目重复一个模板。 NgSwitch:只显示多个可能元素一个。 NgIf  您可以通过向元素应用NgIf指令(称为宿主元素)来添加或移除DOM元素。...'none' : 'block'">Hide with style 隐藏一个元素与用NgIf去除一个元素是完全不同。 当你隐藏一个元素元素及其所有的后代仍然保留在DOM。...NgIf为false,Angular从DOM删除元素及其后代。 摧毁了他们组件,潜在地释放了大量资源,从而带来了更加快速用户体验。 展示/隐藏技术适合少数几个后代元素。...NgSwitchCase和NgSwitchDefault指令是结构指令,因为它们添加或删除DOM元素。 NgSwitchCase在其绑定值等于交换机值将其元素加到DOM。...没有选择NgSwitchCase,NgSwitchDefault将其元素加到DOM。 switch指令对于添加和删除组件元素特别有用。

29.9K20

Jump Start Bootstrap 第4章

这个ul元素应该有类”dropdown-menu”。现在,我们有了一个简单下拉菜单,在单击链接显示菜单。我们可以在浏览器查看,如图所示。 ?...当你点击按钮,你会看到一个类似于插图效果样式;在再次单击回到原来样式,如图所示。data-toggle=”button”实现了这个切换功能。 ?...插件在任何DOM元素侦听滚动,根据元素滚动位置在导航栏突出显示菜单项。 基本上,它是一个双组件插件;由一个导航条和一个内容区域组成。内容区域划分为多个部分,每个部分都有一个惟一ID。...添加data-dismiss使按钮在单击关闭模式对话框。 对于本体,我们需要一个包含类modal-body元素。您可以将几乎任何内容放到元素。...元素,可以作为一个modal handle元素,可以包含一个包含链接属性href。Bootstrap模式对话框有一个选项,单击句柄,将该链接加载到modal-body元素

28.3K40

jQuery (二)

使用jQuery处理事件 事件处理 一个栗子,单击p背景变成灰色 由于es6箭头函数不支持this绑定,所以无法使用箭头函数,只能使用匿名函数 html <!...如果没有参数,将会直接设置display值为none,如果有任意一个参数,将会设置高度和不透明度,将其变为0,并且display也将会变为none,确保不会影响页面的布局。...默认队列名为fx,这是没有指定队列名默认使用队列。...// 选取div.note 将选中元素集用做上下文 即交并补 $('div').find('p'); // 在div查找p元素 $('#header, #footer').find('p');..., ''); // 遍历jQuery对象每一个元素 this.each(function() { // 将参数字符串作为文本添加到每一个元素后面,添加一个br jQuery

9.3K30

如何在 React 中点击显示或隐藏另一个组件?

使用 React 状态管理控制组件可见性React 状态是指组件私有的数据,决定了组件在呈现时外观和行为。状态更改时,组件会重新呈现,以反映这些变化。...然后,我们在组件返回值渲染一个按钮和一个条件渲染 div 元素。当用户单击按钮,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...使用事件处理机制响应用户交互React 组件可以用 onClick 事件处理函数来响应用户单击事件。当用户单击按钮,onClick 事件处理函数被触发,执行一些逻辑代码。...然后,我们编写了一个名为 handleClickOutside 事件处理函数,它将检查用户单击元素是否在菜单之外。如果用户单击元素不在菜单,则将可见性设置为 false,菜单将被隐藏。...如果用户单击元素不在模态对话框,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。

4.4K10

杨老师课堂之Jquery筛选,事件,效果,Ajax,javascript跨域)

•end 结束选取自己位置如果不指定,则就是本身结尾 1.2 查找 children([expr]),取得一个包含匹配元素集合每一个元素所有子元素元素集合。...事件冒泡可能会引起预料之外效果,上例,本来只想触发元素 click事件,然而 元素元素click事件也同时被触 发了.因此有必要对事件作用范围进行限制.单击元素,只 触发元素click...事件,而不触发 和元素 click事件.单击 元素,只触发 元素click事件, 而不触发元素click事件....; event.stopPropagation();//停止冒泡事件 }) 单击span元素,只会触发span元素click事件,而不会触发 div元素和body元素click事件....方法作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery,那么IE浏览器 是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动条宽度和高

8.2K20

实战!半小时写一个脑力小游戏

HTML 初始化页面模版链接 css文件 js文件. ? 这个游戏有 12 张卡片。 每张卡片中都包含一个名为 .memory-card容器 div包含两个img元素。...把 front-faceand back-faceposition属性都设置为 absolute,这样就可以从原始位置移除元素使它们堆叠在一起。 这时页面模版看上去应该是这样: ?...每次元素被点击都会触发 :active伪类,引发一个 0.2秒过渡: ? 翻转卡片 要在单击翻转卡片,需要把一个 flip类添加到元素。...每当卡片被点击,都会触发 flipCard函数,其中 this代表被单击的卡片。 该函数访问元素 classList切换到 flip类: ?...如果匹配的话,则调用 disableCards()分离两个卡上事件侦听器,以防止再次翻转。

1.7K20

AngularDart4.0 英雄之旅-教程-08HTTP 顶

注册HTTP服务 在应用程序可以使用BrowserClient之前,您必须将其注册为服务提供者。 您应该可以从应用程序任何位置访问BrowserClient服务。...当应用程序使用模拟英雄列表,更新直接应用于单个应用程序范围共享列表英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素加到英雄组件HTML,位于重复元素英雄名称之后。...transform(switchMap(...))为通过debounce()和distinct()创建每个搜索项调用搜索服务。 取消放弃以前搜索,只返回最新搜索服务流元素。...从hero_search_component.dart导入HeroSearchComponent,并将其加到directives 列表

11K30

使用 Vue.js 和 JavaScript 在 Web 应用程序中下载 PDF 文件

downloadPdf函数负责创建指向 PDF 文件“a”链接模拟点击,触发文件下载 。 ---- 使用组件 现在我们已经创建了组件,我们可以在应用程序任何地方使用它。...为此,我们只需导入组件并将其包含在我们希望下载按钮出现 HTML 代码。...downloadPdf函数使用href、target 和 download属性创建一个“a”链接,然后将其加到文档主体模拟点击链接。...要在你组件中使用此可组合项,你只需导入调用downloadPdf函数,将 PDF 文件位置作为参数传递。...模板下载按钮在单击时调用downloadPdf方法。 结论 现在你知道了如何使用 Vue.js 和 JavaScript 在前端 Web 应用程序创建下载 PDF 文件功能。

2.6K10

分享5个关于 Vue 小知识,希望对你有所帮助

由于我们使用v-model将其绑定到所选值属性值,我们可以通过this.key获取相同值。 作为替代,我们可以删除($event)编写,得到相同结果。...当我们将鼠标移出div,“hovered”消失了。 3、在Vue.js获取组件内元素 有时候,我们希望在Vue.js获取组件内元素。...然后,在模板,我们添加 v-click-outside 并将其值设置为 onClickOutside,以在单击外部时运行方法。...当我们单击外部,应该看到“clicked outside”被记录。 我们可以通过创建自定义指令来检测 Vue.js 中元素点击。...工具提示展示如果用户点击了工具提示以外其他地方,我们通常希望工具提示会消失。

19430

回到基础:理解 JavaScript DOM

使 Javascript 能够访问和操作页面的元素和样式。模型构建在基于对象树结构定义: HTML 元素作为对象 HTML 元素属性和事件 访问HTML元素方法 ?...添加元素 1var div = document.createElement(‘div’); 在这里我们用了 createElement() 方法创建一个 div 元素方法将标记名作为参数并将其保存到变量...方法创建内容,方法用字符串作参数,然后在文档已经存在 div 之前插入新 div 元素。... 在此例单击按钮文本将被改为 “Hello!”。 还可以在触发事件时调用函数,如下一个例子所示。...如果你觉得本文有用,请推荐给你朋友和他们分享。 如果你有什么问题或反馈,请在下面的评论告诉我。

2.5K30
领券