1. 引入必要的文件： 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建商品列表和购物车： 在页面中创建一个商品列表和一个购物车。
<div class="item" data-id="1">Item 1</div>
<div class="item" data-id="2">Item 2</div>
<div class="item" data-id="3">Item 3</div>
<div id="shoppingCart" class="easyui-droppable" style="border: 1px solid #ccc; height: 150px;">
Shopping Cart
</div>
3. 初始化拖动和放置： 使用 EasyUI 提供的 draggable 和 droppable 函数初始化拖动和放置的功能。
<script>
$(function(){
// 初始化可拖动商品
$('.item').draggable({
revert: true, // 拖动结束后返回原位置
proxy: 'clone' // 创建一个元素的副本进行拖动
});
// 初始化购物车为可放置区域
$('#shoppingCart').droppable({
onDragEnter: function(e, source){
$(this).css('border', '2px solid #28a745'); // 拖动进入购物车时改变边框颜色
},
onDragLeave: function(e, source){
$(this).css('border', '1px solid #ccc'); // 拖动离开购物车时恢复边框颜色
},
onDrop: function(e, source){
// 将商品添加到购物车
var item = $(source).clone().appendTo(this);
item.draggable('disable'); // 禁用购物车中的商品拖动
$(this).css('border', '1px solid #ccc'); // 恢复购物车边框颜色
}
});
});
</script>
在这个例子中，.item 类表示商品，使用 draggable 函数初始化为可拖动元素。#shoppingCart 是购物车，使用 droppable 函数初始化为可放置区域。在 onDrop 回调函数中，将拖动的商品克隆并添加到购物车中，并禁用购物车中的商品拖动功能。
这只是一个简单的例子，你可以根据实际需求和业务逻辑进行更复杂的定制。例如，可以在购物车中添加商品数量和价格等信息。
转载请注明出处：http://www.zyzy.cn/article/detail/13090/jQuery EasyUI