<title>jQuery UI 放置（Droppable） - 购物车演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
h1 { padding: .2em; margin: 0; } #products { float:left; width: 500px; margin-right: 2em; } #cart { width: 200px; float: left; margin-top: 1em; } #cart ol { margin: 0; padding: 1em 0 1em 3em; } $( "#catalog" ).accordion();
$( "#catalog li" ).draggable({ $( "#cart ol" ).droppable({ activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
items: "li:not(.placeholder)",
$( this ).removeClass( "ui-state-default" );
<h1 class="ui-widget-header">产品</h1>
<h2><a href="#">T-Shirts</a></h2>
<li>Cheezeburger Shirt</li>
<h2><a href="#">Bags</a></h2>
<li>Alligator Leather</li>
<h2><a href="#">Gadgets</a></h2>
<h1 class="ui-widget-header">购物车</h1>
<div class="ui-widget-content">
<li class="placeholder">添加产品到这里</li>