jEasyUI 创建拖放的购物车学习笔记
概述
jEasyUI 是一款基于 jQuery 的易于使用的 UI 库，提供了丰富的 UI 组件，包括表格、树形菜单、对话框等多种组件。其中，拖放组件是 jEasyUI 中的一个常用组件，可以方便地实现元素的拖放操作。
本文将介绍如何使用 jEasyUI 创建一个简单的购物车应用，通过拖放来将商品添加到购物车中。
实例演示
在开始之前，请确保已经引入了 jQuery 和 jEasyUI 的库文件。将以下代码保存为 HTML 文件，然后在浏览器中查看效果。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 创建拖放的购物车学习笔记</title>
<!-- 引入 jQuery 和 jEasyUI 的库文件 -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/cupertino/easyui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script>
<style>
/* 样式定义 */
#products {
width: 200px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
}
#cart {
width: 200px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
}
.product {
margin-bottom: 10px;
padding: 5px;
background-color: #e1e1e1;
}
.product img {
float: left;
margin-right: 5px;
width: 50px;
height: 50px;
}
.product .title {
font-size: 12px;
color: #333;
margin-top: 5px;
}
.product .price {
font-size: 12px;
color: #f00;
margin-top: 5px;
}
.cart-item {
margin-bottom: 10px;
padding: 5px;
background-color: #e1e1e1;
}
.cart-item img {
float: left;
margin-right: 5px;
width: 50px;
height: 50px;
}
.cart-item .title {
font-size: 12px;
color: #333;
margin-top: 5px;
}
.cart-item .price {
font-size: 12px;
color: #f00;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="products">
<div class="product" data-id="1" data-title="商品 1" data-price="100">
<img src="https://dummyimage.com/50x50/000/fff.png&text=1" alt="">
<div class="title">商品 1</div>
<div class="price">价格：100 元</div>
</div>
<div class="product" data-id="2" data-title="商品 2" data-price="200">
<img src="https://dummyimage.com/50x50/000/fff.png&text=2" alt="">
<div class="title">商品 2</div>
<div class="price">价格：200 元</div>
</div>
<div class="product" data-id="3" data-title="商品 3" data-price="300">
<img src="https://dummyimage.com/50x50/000/fff.png&text=3" alt="">
<div class="title">商品 3</div>
<div class="price">价格：300 元</div>
</div>
</div>
<div id="cart"></div>
<script>
$(function(){
// 将产品列表设为可拖动
$(".product").draggable({
revert:true, // 拖动回到原位置
cursor:"pointer", // 鼠标形状
proxy:function(source){
// 创建代理元素
var p = $("<div style='border:1px solid #ccc;width:50px;height:50px;'></div>");
p.append($(source).find("img").clone());
return p;
}
});
// 将购物车列表设为可接受拖拽的元素
$("#cart").droppable({
onDragEnter:function(e,source){
$(source).draggable("options").cursor = "auto";
$(this).addClass("cart-hover");
},
onDragLeave:function(e,source){
$(source).draggable("options").cursor="pointer";
$(this).removeClass("cart-hover");
},
onDrop:function(e,source){
var price = $(source).attr("data-price"); // 获取商品价格
// 添加到购物车列表中
var item = $("<div class='cart-item'></div>").appendTo($("#cart"));
item.append($(source).find("img").clone());
item.append("<div class='title'>"+$(source).attr("data-title")+"</div>");
item.append("<div class='price'>价格："+price+" 元</div>");
// 更新购物车总价
var total = $("#total").html();
total = parseInt(total) + parseInt(price);
$("#total").html(total);
}
});
});
</script>
</body>
</html>
实现步骤
- 创建两个 div 元素，其中一个用于显示商品列表，另一个用于显示购物车列表。给它们分别设置 id，方便后续操作。
- 在商品列表中，为每个商品创建一个 div 元素，用于显示商品信息。添加 data-id、data-title 和 data-price 三个自定义属性，分别代表商品的编号、名称和价格。
- 使用 jEasyUI 的 draggable 方法将商品列表中的每个 div 元素设为可拖动。
- 使用 jEasyUI 的 droppable 方法将购物车列表设为可接受拖拽的元素。
- 在购物车列表的 onDrop 事件中，获取商品的价格，并将商品信息添加到购物车列表中。同时更新购物车总价。
总结
通过 jEasyUI 提供的拖放组件，我们可以很方便地实现 UI 操作，例如创建购物车应用。希望本文能够对您有所帮助！