<head>
<script type="text/javascript" src="../../Jscript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../Jscript/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../Jscript/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../Jscript/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../Jscript/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../Jscript/jquery.ui.droppable.js"></script>
<script type="text/javascript">
$(function(){
$(".divdrag").draggable({opacity:0.35});
$("#divCart").droppable({
drop:function(){
$(this)
.addClass("divget")
.append($("<div></div>"))
.find("#divtip").remove();
}
});
})
</script>
<style type="text/css">
body{ font-size:13px;}
.divframe{ width:400px;}
.divleft{ float:left; border:1px solid #666; width:100px;}
.divright{ float:right; border:solid 1px #666; width:200px;}
.divtitle{ background:#ccc; padding:5px;}
.divdrag{ padding:5px; cursor:move;}
.divget{ background:#eee;}
#divCart div{ padding:5px; height:85px; font-size:12px;}
</style>
</head><body>
<div class="divframe">
<div class="divleft">
<div class="divtitle">product</div>
<div class="divdrag">
<img src="Images/img03.jpg" alt="" />
</div>
</div>

<div class="divright">
<div class="divtitle">car</div>
<div id="divCart">
<div class="divtip">no</div>
</div>
</div>
</div>
</body>
</html>
实现图片的拖拽功能,但效果没出现,望各位高手指点一下