您的位置:首页 - jQuery Plugins
jQuery UI Droppable购物车示例

体验效果:http://keleyi.com/keleyi/phtml/jui/droppable/

本示例使用到了jQuery UI的Droppable功能,Droppable是一个可以把一个元素拖着放到另一个元素中插件。插件详细介绍:http://keleyi.com/a/bjad/llcungjn.htm

源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable购物车示例-柯乐义</title>
<link rel="stylesheet" href="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.4/themes/sunny/jquery-ui.min.css">
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<style>
body
{
font-family: "Trebuchet MS" , "Helvetica" , "Arial" , "Verdana" , "sans-serif";
font-size: 62.5%;
}
h1
{
padding: .2em;
margin: 0;
}
#products
{
float: left;
width: 500px;
margin-right: 2em;
}
#cart
{
width: 200px;
float: left;
margin-top: 1em;
}
/* style the list to maximize the droppable hitarea */
#cart ol
{
margin: 0;
padding: 1em 0 1em 3em;
}
</style>
<script type="text/javascript">
$(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 () {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
}
});
});
</script>
</head>
<body>
<div style="width: 736px;">
<h1>
jQuery UI Droppable购物车示例</h1>
可以把产品列表中的产品拖到购物车中放下 <a href="http://keleyi.com/a/bjad/760qp325.htm" target="_blank">
原文</a>
</div>
<div id="products">
<h1 class="ui-widget-header">
产品列表</h1>
<div id="catalog">
<h2>
<a href="#">T-Shirts</a></h2>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</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>
<h2>
<a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">
购物车</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">把要购买的东西拖到这里放下</li>
</ol>
</div>
</div>
</body>
</html>
本站导航
相关文章
柯乐义 Copyright© keleyi.com