H5的拖曳效果示例

最新推荐文章于 2024-01-23 09:00:00 发布

VIP文章 misaka去年夏天

最新推荐文章于 2024-01-23 09:00:00 发布

阅读量5k

点赞数

分类专栏： js html+css 文章标签： html html5 javascript 拖拽

本文链接：https://blog.csdn.net/misakaqunianxiatian/article/details/50658900

版权

利用H5新增的draggable和ondrag*事件可以用简单的代码完成拖曳事件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5的拖拽效果实例</title>
</head>
<style>
	#box{
		height: 200px;
		width: 200px;
		border: 1px solid orange;
		float: left;
	}
	
	#con{
		height: 200px;
		width: 200px;
		border: 1px solid green;
		margin: 0;
		padding: 0;
		float: left;
	}
	li{
		height: 30px;
		width: 200px;
		background-color: #abcdef;
		list-style: none;
		text-align: center;
		margin: 10px 0;
	}
</style>
<body>
	<div id="box"></div>
	<ul id="con">
		<li>哲学</li>
		<li>汉堡包</li>
		<li>肉夹馍</li>
		<li>代码</li>
	</ul>
</body>
<script>
	var box = document.getElementById('box');
	var con = document.getElementById('con

最低0.47元/天解锁文章

优惠劵

misaka去年夏天

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5的拖曳效果示例

利用H5新增的draggable和ondrag*事件可以用简单的代码完成拖曳事件： H5的拖拽效果实例 #box{ height: 200px; width: 200px; border: 1px solid orange; float: left; } #con{ height: 200px; width: 200px; border: 1
复制链接

扫一扫