jqueryUI的互动效果之droppable和draggable

最新推荐文章于 2021-11-04 13:40:31 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2021-11-04 13:40:31 发布

阅读量323

点赞数

分类专栏： jqueryUI

本文链接：https://blog.csdn.net/echokkk/article/details/78848067

版权

jqueryUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 引入jqueryUI的话，首先要引入jquery -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
	<!-- 引入jqueryUI的js文件 -->
	<script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	<!-- 引入jQueryUI的css文件 -->
	<link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom/jquery-ui.css">
	<style type="text/css">
		.box1 {
			width: 50px;
			height: 50px;
			border: 4px solid red;
		}
		.box2 {
			height: 400px;
			width: 400px;
			border: 4px solid blue;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<script type="text/javascript">
		$(".box2").droppable();
		$(".box1").draggable();
		$(".box2").on("drop",function(event,ui){
			$(this).text("box1放置进了box2");
		})
	</script>
</body>
</html>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqueryUI的互动效果之droppable和draggable

demo代码如下： Document .box1 { width: 50px; height: 50px; border: 4px solid red; } .box2 { height: 400px; width: 400px; border: 4px solid blue; }
复制链接

扫一扫

专栏目录