html5元素复制拖动

最新推荐文章于 2024-07-08 16:01:05 发布
最新推荐文章于 2024-07-08 16:01:05 发布
阅读量230 收藏
点赞数
分类专栏： 网页设计 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinhuding/article/details/107774096
版权 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
//alert(1)
ev.preventDefault();
}

function drag(ev)
{
//alert(2)
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
  alert(3)
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>
java之书
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html5实现拖拉复制元素的效果
weixin_40626699的博客
01-18 1407
drag(),drop()
HTML5——元素拖放
m0_68169119的博客
07-19 2623
HTML5的元素拖放
HTML5 拖拽复制移动元素
慢谈人生
08-21 1202
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></tit...
HTML5 拖拽复制功能的实现
10-21
主要介绍了HTML5 拖拽复制功能的实现的相关资料,需要的朋友可以参考下
HTML 中添加视频
qq_34870529的博客
11-21 1344
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
拖拽小案例（以克隆的方式实现）
qq_42209630的博客
05-28 2301
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
HTML5如何实现元素拖拽
12-13
很多前端恐怕都不了解HTML5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。 先上示例： index.html XML/HTML Code复制内容到剪贴板 <!doctype html>  <html>  <head>  &...
HTML5拖拽的简单实例
12-30
draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值 XML/HTML Code复制内容到...
HTML5可拖拽的下拉菜单功能源码.zip
11-04
其中，可拖拽（Drag and Drop）功能就是HTML5的一个显著特性，它允许用户通过鼠标或触摸设备直接在网页上进行元素的拖放操作，提升了用户体验。在这个"HTML5可拖拽的下拉菜单功能源码.zip"中，我们很可能会找到一个...
Html5实现如何在两个div元素之间拖放图像
12-14
拖拽之后效果 代码如下 复制代码代码如下:[code]<!DOCTYPE HTML><html><head><style type=”text/css”>#div1, #div2{float:left; width:100px; height:35px; margin:10px;padding:10px;...
html5 复制,Html5实现拖拽复制功能
weixin_31677427的博客
06-29 404
拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖拽是标准的一部分，任何元素都能够拖拽。 Html5拖拽非常常见的一个功能，但是大部分拖拽的案例都是一个剪切的过程， 项目中需要实现Html5拖拽复制的功能，Html5拖拽复制很简单，只需要在普通Html5拖拽的过程中做一点小小的改动即可。浏览器支持：Internet Explorer 9FirefoxOpera 12Chr...
H5完成拖拽，复制数据功能~
波波诸葛伟
03-09 1661
在React 、Redxu 、Dva框架背景下实现h5拖拽复制~需求如图：我想在模板预览组件中拖拽某个模板至页面预览~ 看代码： 要被拖拽的元素设置一些必须的属性：draggable、onDragStart&lt;div draggable="true" onDragStart={drag}&gt; 我是模板中的小盒子 &lt;/div&gt;123在拖...
Html5拖拽复制
weixin_34044273的博客
09-28 428
拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖拽是标准的一部分，任何元素都能够拖拽。 Html5拖拽非常常见的一个功能，但是大部分拖拽的案例都是一个剪切的过程， 项目中需要实现Html5拖拽复制的功能，Html5拖拽复制很简单，只需要在普通Html5拖拽的过程中做一点小小的改动即可。 ps: 本篇博文为非首页文章,只是简单的笔记。 浏览器支持 Int...
js实现元素的clone与拖动
温故而知新的博客
06-23 2715
js实现元素的clone与拖动有时候还是会遇到的，以下是示例代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="textml; charset=utf-8" /&gt;    &lt;title&gt;Clone&
HTML5拖拽移动列表
macanfa的博客
07-15 4998
练习HTML5中的拖放API，实现列表拖拽移动！ 思路： 循环设置每个子项的draggable属性，以及设置拖动标记（不会多个或全部子项都移动） 每次进入投放区，则检测时候有拖放标记，有则添加dom元素，以此类推
HTML5实现我的音乐网站源码
xcLeigh
07-08 895
HTML5实现我的音乐网站源码，音乐网站源码，实现音乐播放，视频播放，轮播图，歌词显示，列表排列，表格表单等功能，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
springmvc前端jsp与html
最新发布
paulwang040的博客
07-08 347
在实际的项目中，JSP和HTML往往不是非此即彼的关系，而是可以结合使用的。例如，可以使用HTML来构建页面的基本结构和静态内容，对于需要动态展示的数据，则可以通过Ajax技术从服务器端获取JSON格式的数据，然后在前端使用JavaScript和DOM操作来动态更新页面内容。动态内容生成：如果需要在HTML页面中展示动态内容，通常需要通过JavaScript（Ajax等）技术从服务器端获取数据后，再通过DOM操作来动态更新页面，这增加了前端开发的复杂度。轻量级：HTML页面加载速度快，对服务器压力小。
HTML(27)——渐变
m0_74386799的博客
07-08 348
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
点击复制元素内容拖拽至另一元素中
07-15
要实现点击复制元素内容并将其拖拽到另一个元素中，你可以使用HTML5的Drag and Drop API。以下是一个示例代码： HTML: ```html <div id="source" draggable="true">源元素</div> <div id="target" ondragover="allowDrop(event)" ondrop="drop(event)">目标元素</div> ``` JavaScript: ```javascript function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var nodeCopy = document.getElementById(data).cloneNode(true); nodeCopy.id = "newId"; //如果需要，可以为复制的元素指定一个新的ID event.target.appendChild(nodeCopy); } document.getElementById("source").addEventListener("dragstart", function(event) { event.dataTransfer.setData("text", event.target.id); }); ``` 这里，我们将源元素设置为可拖拽的（draggable="true"），并在开始拖动时将其ID存储在`dataTransfer`对象的数据中。然后，我们在目标元素上设置了两个事件处理程序：`ondragover`和`ondrop`。`ondragover`事件处理程序用于阻止默认的拖放行为，而`ondrop`事件处理程序会获取存储在`dataTransfer`对象中的数据，并将其克隆为新的元素，然后将其附加到目标元素中。 这样，当你点击源元素并将其拖动到目标元素上时，源元素的内容会被复制到目标元素中。记得将源元素和目标元素的ID设置为你实际使用的ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java之书

会持续更新实用好的文章谢谢关注

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值