<!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