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

在拖放到JavaScript中的拖放目标后,如何将拖放的项添加到数组中,然后在HTML中显示它?

在拖放到JavaScript中的拖放目标后,我们可以通过以下步骤将拖放的项添加到数组中,并在HTML中显示它:

  1. 创建一个空数组来存储拖放的项。
  2. 在拖放目标元素上注册拖放事件的处理函数。
  3. 在处理函数中,使用event.dataTransfer.getData('text')来获取拖放的数据,这里假设拖放的数据是文本类型。
  4. 将获取到的数据添加到数组中,可以使用数组的push()方法来实现。
  5. 创建一个用于显示数组内容的HTML元素,例如一个<ul>列表。
  6. 在HTML中找到用于显示的目标元素,并将数组中的每个项都添加为列表项,可以使用DOM操作来实现,例如使用createElement()appendChild()方法。
  7. 将目标元素插入到HTML文档中,以便显示更新后的列表。

下面是示例代码:

HTML:

代码语言:txt
复制
<div id="dropzone">
  拖放到此处
</div>

<ul id="list"></ul>

JavaScript:

代码语言:txt
复制
// 创建空数组
var items = [];

// 获取拖放目标元素
var dropzone = document.getElementById('dropzone');
// 注册拖放事件处理函数
dropzone.addEventListener('drop', handleDrop);

// 处理拖放事件的函数
function handleDrop(event) {
  // 阻止事件默认行为
  event.preventDefault();

  // 获取拖放的数据
  var data = event.dataTransfer.getData('text');

  // 添加到数组中
  items.push(data);

  // 获取用于显示的目标元素
  var list = document.getElementById('list');

  // 创建新的列表项
  var listItem = document.createElement('li');
  listItem.textContent = data;

  // 将列表项添加到目标元素中
  list.appendChild(listItem);
}

上述代码中,首先创建了一个空数组items来存储拖放的项。然后通过getElementById()方法获取拖放目标元素,并使用addEventListener()方法注册了拖放事件的处理函数handleDrop()。在处理函数中,通过event.dataTransfer.getData('text')获取拖放的数据,并将其添加到数组中。接着,通过getElementById()方法获取用于显示的目标元素,并通过DOM操作创建了一个新的列表项,并将其添加到目标元素中。最后,在HTML中预先定义了一个空的<ul>元素,用于显示列表项。

在实际应用中,可以根据具体的需求进行修改和扩展,例如可以支持拖放其他类型的数据、进行数据验证等。关于拖放和JavaScript的更多信息,可以参考MDN Web 文档

相关搜索:拖放的文件会显示在JavaScript中,但不会出现在请求中拖放到拖拽区域时,在输入类型中显示形状的id,并在选择形状时在拖拽区域中编辑形状vue.js:在HTML中突出显示javascript数组中的新对象对数组进行排序,在检查数组中的likes对象后显示8项在javascript数组中插入后,返回的python值中断html表如何将zip文件移动到新的目标位置,然后在python 3中打开它如何将输入框的值传递到数组中,然后使用html列表标记显示它?在Sass中,我如何根据特定子项的父项来确定它的目标,然后在媒体查询中使用它?为什么在推送数组中的项后,函数内部在node.js(mongoose)中该函数外部显示空数组?初始化数组后,它显示他在promise函数的"then“中是未定义的如何将数据推送到json服务器,然后将其显示在Angular/ionic中的html页面中在Javascript中,如何将新选项添加到Html中根据文本的字母值选择并插入是否可以将完整大小的图像从网站拖放到资源管理器中,在资源管理器中只显示缩略图Javascript -在div内滚动且数组中的每一项到达顶部时显示元素如何读取excel工作表并将其存储在java script数组中,以及如何将其显示为html中的表。如何获取数组中每一项的最后一个元素子项,然后在单击它们时显示它们如何将标签添加到pandas dataframe.to_html链接中,使url的绝对路径不会显示在html中,而是显示为一个标签?在JavaScript中,如何将第一个大括号开头的字符串中的每一项都设置为数组?在foreach循环中创建一个表,然后使用php为数组中的每一项打印相同的html元素(输入)(仅使用该循环一次)
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用jQuery Draggable和Droppable实现拖拽功能

上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能。最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素。...父节点可以折叠起来 2.用户可以通过拖放的操作,将元素从左侧拖放到右侧。如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边 3.元素放到右侧,右侧可以接受元素的区域有2种可能。...实现拖动父节点时,其下面的子节点元素也要拖放到右边。如果是拖动的子节点元素,就在右边直接显示子节点元素。...所以我们要计算出我们点击的B元素的位置,然后让draggableDiv在拖动时候显示正确的位置,然后拖动就是draggableDiv元素,用户看起来是拖动的B节点元素。...完成“放”的操作。可以从上图看出,我是将元素的上边左边和下边缘的左边存到一个数组里面。然后在“拖”的过程中,一直记录了拖动的左边,放到右侧时,就可以判断当前元素将要放的位置。具体可以下载代码查看。

2.9K60

HTML5 拖放API与Vue.js实战

拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。 在本文中我们将用 Vue.js 构建一个简单的看板应用。...HTML5 拖放 API 是什么? 当用户将鼠标移到可拖动元素上时,拖动操作开始,然后将元素移动到启用拖放的元素上。 再默认情况下,唯一可拖动的 HTML 元素是图像和链接。...可以在开始拖动操作时(调用 dragstart 事件时)将数据添加到拖动数据存储中,并且只能在完成拖放操作后(调用 drop 事件时)才能接收数据。...从拖动到释放元素的这段时间中,元素被拖放后,将会在被拖动的元素上触发两个事件:dragstart 和 dragend。 现在还不能把可拖动元素拖放到任何地方。...总结 在本文中,我们介绍了什么是 HTML 5 拖放 API ,如何使用,以及如何在 Vue.js 中实现。 拖放功能也可以在其他前端框架和原生 JavaScript 中使用。

4.3K10
  • HTML5 拖放

    一、什么是拖放(Drag 和 drop)? 拖放(Drag 和 drop)在WEB软件应用中是一种常见的操作,就是用户可以用鼠标点击对象以后拖到另一个位置。...拖放是HTML5 标准中的一部分,任何标签元素都能够被拖放。 二、为什么需要拖放?...在WEB应用开发中,可能需要针对页面中的某个对象:图片、文字、容器等,进行位置的移动来实现自定义的布局 常见的拖放应用一:电商平台中的商家 店铺装修,这个时候电商平台会提供多个可以拖动的模块,商家可以根据...,这些模块的摆放一般有一个初始默认位置,各种角色的管理员可以根据自己的喜好来将这些模块按照自己的习惯进行拖动摆放 在HTML5 之前,我们要想实现针对页面中的标签元素的 移动和拖放,没有一个统一的操作标准...该方法将返回在 setData() 方法中设置为相同类型的数据 被拖元素数据 是被拖元素的 id ("drag1") 把被拖动图片元素 追加 到放置元素(目标元素)中 二、拖动一个图片到一个div容器中

    1.5K20

    drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

    而HTML5中直接提供了拖放的API,只要通过监听元素的拖放事件就能实现各种拖放功能。拖放API阐释拖放(Drag和 drop)是 HTML5 标准的组成部分。...dragover -> dragleave -> drop ->dragend目标对象事件:drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象时触发,可理解为在目标对象内松手时触发。...它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。files返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。...如果effectAllowed属性是定为none,则不允许拖放元素dropEffect   表示拖放操作的视觉效果(作用于目标元素),如果dropEffect 属性设定为none,则不允许被拖放到目标元素中...move:应该把拖动的元素移动到放置目标copy:应该把拖动的元素复制到放置目标link:表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接,有URL)chrome 默认是显示一个绿色的加号,设置

    6.4K21

    JavaScript进阶之实现拖拽

    最近做到的react项目就有一个拖拽的需求,然后大概搜索了一下,找到了star比较高的react-dnd库,但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强,所以在介绍react-dnd...,此事件作用在目标元素上 ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上 ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上...另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。...定义拖动效果 dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖动过程中浏览器显示的鼠标样式。比如,当用户悬停在目标元素上的时候,浏览器鼠标也许要反映拖放操作的类型。...有 3 个效果可以定义: copy 表明被拖动的数据将从它原本的位置拷贝到目标的位置。 move 表明被拖动的数据将被移动。 link 表明在拖动源位置和目标位置之间将会创建一些关系表格或是连接。

    2.7K40

    html5鼠标拖动排序及resize实现方案分析及实践

    而HTML5中直接提供了拖放的API,只要通过监听元素的拖放事件就能实现各种拖放功能。 拖放(Drag和 drop)是 HTML5 标准的组成部分。...,被拖拽对象离开目标对象时触发 目标对象事件: drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象时触发,可理解为在目标对象内松手时触发。...dataTransfer,主要是用于在源对象和目标对象之间传递数据。...text/uri-list 注:如果给定类型的数据不存在,则将其添加到拖动数据存储的末尾,使得dataTransfer.types列表中的最后一个项目将是新类型。...如果effectAllowed属性是定为none,则不允许拖放元素 dropEffect   表示拖放操作的视觉效果,如果dropEffect 属性设定为none,则不允许被拖放到目标元素中。

    3.1K10

    【Vue.js ——功能实现】趣购(蓝桥杯真题-2426)【合集】

    index.html 页面,显示如下所示: 目标效果 请在 trolley.vue 文件中的 TODO 部分补全代码: 用鼠标按下拖动图片到购物车(即 id="trolley" 的节点)中,然后松开鼠标...dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发(每 100 毫秒触发一次) drop ondrop 当元素或选中的文本在可释放目标上被释放时触发,想要 ondrop...goodsDetail():生成购物车中商品的详情字符串,先复制一份 goods 数组,然后遍历 bought 数组,统计每种商品的数量,最后过滤掉数量为 0 的商品,将商品名称和数量拼接成字符串。...handleDrop(event):在商品被拖放到购物车并释放鼠标时触发,阻止默认的 drop 行为,从 event.dataTransfer 中获取商品信息并解析为对象,然后将该商品对象添加到 bought...释放商品:用户在购物车上方释放鼠标,触发 handleDrop 方法,从 dataTransfer 中获取商品信息并添加到 bought 数组中。

    4300

    界面劫持之拖放劫持

    在JavaScript或者Java API的支持下,这个攻击过程会变得非常隐蔽。因为它突破了传统ClickJacking一些先天的局限,所以这种新型的"拖拽劫持"能够造成更大的破坏。...02拖放劫持核心思路"拖放劫持"的思路是诱使用户从隐藏的不可见iframe中"拖拽"出攻击者希望得到的数据,然后放到攻击者能控制的另外一个页面中,从而窃取数据。...另外一种方式是,通过浏览器的 API 接口将 iframe 中的内容拖拽到目标网页的 text area 中,攻击者就可以获得用户网页中存在的敏感信息。...setData操作完成向系统剪贴板中存储需要传递的数据,传递数据分为两种类型:文本数据和URL数据。在HTML5的扩展中,其允许指定任意的MIME类型。...图片用户的拖动和释放实际上是使用getdata方法和setdata方法,先将选中的信息储存在剪贴板中然后将信息打印在textarea中,由于加载的网页使用了携带token的form提交,所以就可以轻松拿到用户的

    23020

    JavaScript 学习-50.实现页面菜单拖放(Drag 和 Drop)

    前言 拖放是一种常见的操作,即抓取对象以后从一个位置拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。...拖放(Drag 和 Drop) 在拖曳操作中,被拖曳的元素称做源对象,是指页面中设置了draggable=”true”属性的元素;源对象进入的元素称作目标元素,目标元素可以是页面的任一元素。...拖放的内容 - ondragstart 和 setData() 然后,规定当元素被拖动时发生的事情。...该方法将返回在 setData() 方法中设置为相同类型的任何数据 被拖数据是被拖元素的 id (“drag1”) 把被拖元素追加到放置元素中 使用示例 一个完整的拖曳效果是由拖曳(Drag)和释放(Drop...)组成的,在HTML 5中任何元素都能够实现拖曳操作,可以通过为元素添加属性draggable=’true’ 来实现, 在拖曳操作中,被拖曳的元素称做源对象,是指页面中设置了draggable=”true

    1.3K20

    界面劫持之拖放劫持分析

    在JavaScript或者Java API的支持下,这个攻击过程会变得非常隐蔽。因为它突破了传统ClickJacking一些先天的局限,所以这种新型的"拖拽劫持"能够造成更大的破坏。...02 拖放劫持核心思路 "拖放劫持"的思路是诱使用户从隐藏的不可见iframe中"拖拽"出攻击者希望得到的数据,然后放到攻击者能控制的另外一个页面中,从而窃取数据。...另外一种方式是,通过浏览器的 API 接口将 iframe 中的内容拖拽到目标网页的 text area 中,攻击者就可以获得用户网页中存在的敏感信息。...setData操作完成向系统剪贴板中存储需要传递的数据,传递数据分为两种类型:文本数据和URL数据。在HTML5的扩展中,其允许指定任意的MIME类型。...用户的拖动和释放实际上是使用getdata方法和setdata方法,先将选中的信息储存在剪贴板中然后将信息打印在textarea中,由于加载的网页使用了携带token的form提交,所以就可以轻松拿到用户的

    30430

    12.HTML5下一代的HTML标准介绍与初识尝试

    ] HTML5 之拖放标签 描述: 拖放(Drag 和 drop)是 HTML5 标准的组成部分, 它是是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中任何元素都能够拖放。...ondragend : 在拖动操作末端运行的脚本。 ondragover : 当元素在有效拖放目标上正在被拖动时运行的脚本。 ondragenter : 当元素已被拖动到有效拖放区域时运行的脚本。...ondragleave : 当元素离开有效拖放目标时运行的脚本。 ondrop : 当被拖元素正在被拖放时运行的脚本(拖放)。...在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据,dataTransfer.setData() 方法设置被拖数据的数据类型和值: function...放到何处 -> ondragover事件规定在何处放置被拖动的数据。 默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    34920

    H5拖放原生js将图片拖放另外一个元素里

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2:元素的可拖放 draggable 属性设置为 true 3:元素中的拖放事件 通过拖放事件...其中最关键的地方在于确定那里发生了拖放事件,有些事件是在被拖动的元素上触发的,而有些事件是在放置目标上触发的。...按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发dragstart事件。 触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。...当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。...如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件(类似于mouseout事件)。 如果元素被放到了放置目标中,则会触发drop事件而不是dragleave事件。

    2.1K30

    HTML5绘画与拖放事件

    HTML5绘画 在html5中出现了许多新的特性,绘画功能就是其中之一。由于html5新增的这些新特性,所以也在逐渐取代Flash,毕竟Flash比较占用内存,也经常性奔溃。...虽然绘画基于canvas,但是canvas本身并没有绘制能力,它仅仅是图形的容器,必须使用js脚本来完成实际的绘图任务。 通过 JavaScript 来绘制: canvas 元素本身是没有绘图能力的。...利用以上所介绍的知识点制作一个2D坦克大战的地图: 代码示例: ? ? ? 运行结果: ? 地图可以自己在二维数组上绘制,1表示显示墙的图片,2表示显示钢板的图片,3则是显示草地的图片。...拖放事件 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够实现拖放。...结合以上几个知识点,可以实现将img元素,来回拖放到不同的div元素中,代码示例: ? 运行结果: ? ? ?

    3K30

    前端里的拖拖拽拽了解一下?

    一、HTML5 中的拖放 拖(Drag)和放(Drop)是 HTML5 标准的组成部分,了解掌握之后,举一反三,有助于提升我们在拖拽场景下技术方案的设计能力。...在拖动元素期间,一些与拖放相关的事件会被触发,像 drag 和 dragover 类型的事件会被频繁触发。...1.3 DataTransfer 在上述的事件类型中,不难发现,放置元素和拖动元素分别绑定了自己的事件,可如何将拖拽元素和放置元素建立联系以及传递数据?...值为:none、copy、link、move (2) 方法 设置给定类型的数据。如果该类型的数据不存在,则将其添加到末尾,以便类型列表中的最后一项将是新的格式。...但 getData() 在测试中发现只能在 ondrop 事件中获取到值: image 1.4 一个案例掌握拖放 API <div class="drag" draggable="true

    5K30

    vc60修改快捷键-MSDEV.EXE-应用程序错误解决办法

    如果没有与其, 关联快捷方式请按照步骤 5 来删除它。 有默认为没有快捷键对该项。 8. 从 类别 中选择 加载项 。 9. 两加载命令 和 命令窗口中显示。 10....单击 文件 菜单并拖动 Open 命令的 文件 弹出式注销, 然后释放它。 3. 单击 项目 菜单, 单击 添加到项目 和然后关闭的弹出 文件 命令拖释放它。 4....在 自定义 对话框中, 选择 命令 选项卡。 5. 从 类别 列表框中选择 外接 。 6. 到 文件 菜单 命令拖放它由 Open 命令 空间中。 7....单击 文件 菜单,然后将 文件 弹出式菜单的 打开 命令拖放并将其释放。 单击 项目 菜单,单击 添加项目 ,然后将,弹出菜单的 文件 命令拖并释放它。 在 自定义 对话框选择该 命令 选项卡。...从 类别 列表框中选择 加载项 。 将 命令拖到 文件 菜单中拖出, 由 打开 命令在空间中。 命令到 添加项目 项在 项目 菜单上拖它 文件 命令在空间中。

    1.4K20

    vc60修改快捷键-MSDEV.EXE 版本

    如果没有与其, 关联快捷方式请按照步骤 5 来删除它。 有默认为没有快捷键对该项。 8. 从 类别 中选择 加载项 。 9. 两加载命令 和 命令窗口中显示。 10....单击 文件 菜单并拖动 Open 命令的 文件 弹出式注销, 然后释放它。 3. 单击 项目 菜单, 单击 添加到项目 和然后关闭的弹出 文件 命令拖释放它。 4....在 自定义 对话框中, 选择 命令 选项卡。 5. 从 类别 列表框中选择 外接 。 6. 到 文件 菜单 命令拖放它由 Open 命令 空间中。 7....单击 文件 菜单,然后将 文件 弹出式菜单的 打开 命令拖放并将其释放。 单击 项目 菜单vc60修改快捷键,单击 添加项目 ,然后将,弹出菜单的 文件 命令拖并释放它。...命令到 添加项目 项在 项目 菜单上拖它 文件 命令在空间中。 本文共 1575 个字数,平均阅读时长 ≈ 4分钟

    1.5K20

    前端10大开源拖拽排序库汇总, 让搭建,更简单

    Interact.js 「interact.js」 是一个 「JavaScript」 资源库提供拖,放,调整尺寸和多点触摸手势功能用于现代浏览器。...Sortable 「Sortable」 —是一个「JavaScript」库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需「jQuery」。...它提供了一个视觉效果引擎,一个拖放库(包括可排序列表),几个控件(基于「Ajax」的动态下拉列表,原地编辑,滑块)等等。...有很多库允许React中的拖放交互. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能....Formily 在 React 中,在受控模式下,表单的整树渲染问题非常明显。

    6.1K21

    整理了12款开源拖拽库, 轻松上手可视化搭建

    Interact.js 「interact.js」 是一个 「JavaScript」 资源库提供拖,放,调整尺寸和多点触摸手势功能用于现代浏览器。...Sortable 「Sortable」 —是一个「JavaScript」库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需「jQuery」。...它提供了一个视觉效果引擎,一个拖放库(包括可排序列表),几个控件(基于「Ajax」的动态下拉列表,原地编辑,滑块)等等。...有很多库允许React中的拖放交互. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能....Formily 在 React 中,在受控模式下,表单的整树渲染问题非常明显。

    2K20
    领券