使用droppable插件实现对象的放置操作 8－2

最新推荐文章于 2020-07-03 17:18:43 发布

JhonXie

最新推荐文章于 2020-07-03 17:18:43 发布

阅读量188

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2552902/blog/543931

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用droppable插件实现对象的放置操作</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.js"></script>
<style type="text/css">
	body{font-size:13px}
	div{margin:5px}
	.divFrame{width:800px;}
	.divLeft{float:left;border:solid 1px #666;width:400px;}
	.divRight{float:right;border:solid 1px #666;width:400px}
	.divTitle{background-color:#ccc;padding:5px}
	.divDrag{padding:5px;cursor:move;}
	img{width:50px;height:50px;}
	.divGet{background-color:#eee}
	#divCart div{padding:5px;height:85px;font-style:11px;}
</style>
<script type="text/javascript">
	$(function(){
		$(".divDrag").draggable({opacity:0.35});
		$("#divCart").droppable({
			drop:function(){
				$(this).addClass("divGet").append($("<div></div>")).find("#divTip").remove();
			}
		})
	})
</script>
</head>
<body>

	<div id="divFrame">
		<div class="divLeft">
			<div class="divTitle">产品</div>
			<div class="divDrag">
				<img src="../Images/001.gif" alt=""/>
			</div>
		</div>
		
		<div class="divRight">
			<div class="divTitle">
				购物车
			</div>
			<div id="divCart">
				<div id="divTip">还没有产品</div>
			</div>
		</div>
	</div>
	
</body>
</html>

知识点说明：http://blog.sina.com.cn/s/blog_7e7249c30100t8j8.html

转载于:https://my.oschina.net/u/2552902/blog/543931