HTML拖放元素
2024-09-05 22:20:06
实现来回拖放图片
<!DOCTYPE HTML>
<html>
<title>来回拖放元素</title>
<meta charset="utf-8">
<head>
<style type="text/css">
#div1 {width:198px; height:200px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:198px; height:200px;padding:10px;border:1px solid #aaaaaa;}
img:hover{cursor: pointer;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
} function drag(ev)
{
ev.dataTransfer.setData("img",ev.target.id);
} function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" />
</div>
</body>
</html>
最新文章
- c#之结构体
- linux安装nginx
- 微信小程序开放公测了 晚上又可以通宵搞代码了
- hdu3078 伪LCA……
- Spring学习4-面向切面(AOP)之schema配置方式
- 简单几何(凸包+枚举) POJ 1873 The Fortified Forest
- SqlSever基础 right函数 从右边开始,截取字符串
- ERWin &; ERStudio图里的实线和虚线的含义[转]
- memcache锁
- javascript !!的作用是把一个其他类型的变量转成的bool类型
- PNPOLY - Point Inclusion in Polygon W. Randolph Franklin
- [Unity3D]Unity3D游戏开发MatchTarget的作用攀登效果实现
- ●BZOJ 4826 [Hnoi2017]影魔
- MVC RedirectToAction 跳转时传参问题
- linux云主机cpu一直很高降不下来,系统日志报nf_conntrack: table full, dropping packet.
- 运行vb写的程序,有些电脑上会弹出一个与office相关的窗口
- python开发day03
- window安装mysql教程
- ASP.NET Web API实践系列01,以ASP.NET Web Form方式寄宿
- Java 8 Lambda表达式,让你的代码更简洁
热门文章
- 弹性盒子FlexBox简介(一)
- 洛谷P3373 【模板】线段树 2 &;&; P2023 [AHOI2009]维护序列——题解
- 改变input的placeholder字体颜色
- 【JOI2017春季合宿】Port Facility
- 修改mac默认python版本 为python3
- join当前线程等待指定的线程结束后才能继续运行
- django 给数据库批量添加数据
- VMware 接入 Openstack — 使用 Openstack 创建 vCenter 虚拟机
- 只有一个form 的程序, onactivate 只触发一次。
- 爬楼梯问题,yield学习总结