<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping Cart</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 400px; margin-right: 2em; }
#cart { width: 230px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#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 );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
<h2><a href="#">Accessories</a></h2>
<div>
<ul>
<li>Earphone</li>
<li>USB Cord</li>
<li>Powerbank</li>
</ul>
</div>
<h2><a href="#">Bags</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</body>
</html>
Drag and Drop Shopping Cart using JQuery.zip
84 浏览量
2023-11-08
19:42:58
上传
评论
收藏 224KB ZIP 举报
Drag and Drop Shopping Cart using JQuery.zip （5个子文件） 
shopping cart 
image.png 19KB
jquery-ui.css 36KB
index.html 2KB jquery-1.10.2.js 276KB jquery-ui.js 476KB资源评论
