<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <title>拖动购物车案例</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        .products{
            list-style:none;
            margin-right:300px;
            padding:0px;
            height:100%;
        }
        .products li{
            display:inline;
            float:left;
            margin:10px;
        }
        .item{
            display:block;
            text-decoration:none;
        }
        .item img{
            border:1px solid #333;
        }
        .item p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }
        .cart{
            position:fixed;
            right:0;
            top:0;
            width:300px;
            height:100%;
            background:#ccc;
            padding:0px 10px;
        }
        h1{
            text-align:center;
            color:#555;
        }
        h2{
            position:absolute;
            font-size:16px;
            left:10px;
            bottom:20px;
            color:#555;
        }
        .total{
            margin:0;
            text-align:right;
            padding-right:20px;
        }
    </style>
    <script>
        var data = {"total":0,"rows":[]};
        var totalCost = 0;

        $(function(){
            $('#cartcontent').datagrid({
                singleSelect:true
            });
            //拖动克隆的商品: draggable 属性的值从 'proxy' 设置为 'clone'，所以拖动元素将由克隆产生。
            $('.item').draggable({
                revert:true,
                proxy:'clone',
                onStartDrag:function(){
                    $(this).draggable('options').cursor = 'not-allowed';
                    $(this).draggable('proxy').css('z-index',10);
                },
                onStopDrag:function(){
                    $(this).draggable('options').cursor='move';
                }
            });

            //放置选择商品到购物车中（购物车采用的是datagrid来存储）
            $('.cart').droppable({
                onDragEnter:function(e,source){
                    $(source).draggable('options').cursor='auto';
                },
                onDragLeave:function(e,source){
                    $(source).draggable('options').cursor='not-allowed';
                },
                onDrop:function(e,source){
                    var name = $(source).find('p:eq(0)').html();
                    var price = $(source).find('p:eq(1)').html();
                    addProduct(name, parseFloat(price.split('$')[1]));
                }
            });
        });

//每当放置商品的时候，需要首先得到商品名称和价格，然后调用 'addProduct' 函数来更新购物车。
        function addProduct(name,price){
            function add(){
                for(var i=0; i<data.total; i++){
                    var row = data.rows[i];
                    if (row.name == name){
                        row.quantity += 1;
                        return;
                    }
                }
                data.total += 1;
                data.rows.push({
                    name:name,
                    quantity:1,
                    price:price
                });
            }
            add();
            totalCost += price;
            $('#cartcontent').datagrid('loadData', data);
            $('div.cart .total').html('Total: $'+totalCost);
        }
    </script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<!--创建商品-->
<ul class="products">
    <li>
        <a href="#" class="item">
            <img src="data:images/shirt1.gif"/>
            <div>
                <p>Balloon</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="data:images/shirt2.gif"/>
            <div>
                <p>Feeling</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="data:images/shirt3.gif"/>
            <div>
                <p>Elephant</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="data:images/shirt4.gif"/>
            <div>
                <p>Stamps</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="data:images/shirt5.gif"/>
            <div>
                <p>Monogram</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="item">
            <img src="data:images/shirt6.gif"/>
            <div>
                <p>Rolling</p>
                <p>Price:$25</p>
            </div>
        </a>
    </li>
</ul>
<!--创建购物车-->
<div class="cart">
    <h1>Shopping Cart</h1>
    <div style="background:#fff">
        <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;">
            <thead>
            <tr>
                <th field="name" width=140>Name</th>
                <th field="quantity" width=60 align="right">Quantity</th>
                <th field="price" width=60 align="right">Price</th>
            </tr>
            </thead>
        </table>
    </div>
    <p class="total">Total: $0</p>
    <h2>Drop here to add to cart</h2>
</div>
</body>
</html>

easyUI拖动购物车案例的更多相关文章

  1. EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能

    一.EasyUI jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 e ...

  2. Vue(五) 购物车案例

    这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...

  3. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  4. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  5. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

  6. easyUI拖动课程进课程表

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动 ...

  7. easyUI拖动：draggable()方法运用

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>de ...

  8. EasyUI ---- draggable购物车

    @{ ViewBag.Title = "Easyui_draggable"; Layout = "~/Views/Shared/Layouts.cshtml"; ...

  9. Session机制二（简易购物车案例）

    一:案例一(简易购物车) 1.目录结构 2.step1.jsp <%@ page language="java" contentType="text/html; c ...

随机推荐

  1. Liunx软Raid实现

    Liunx软Raid实现 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在配置软Raid之前,我们首先要了解一下什么是Raid,Raid又分哪几个系列?哪个又是最靠谱的组合?我们生 ...

  2. Python基础数据类型-字符串（string）

    Python基础数据类型-字符串(string) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客使用的是Python3.6版本,以及以后分享的每一篇都是Python3.x版 ...

  3. my read travel

    s 江苏省5A级旅游景区 ▪ 无锡中视股份三国水浒景区 ( 无锡) ▪ 中山陵景区 ( 南京) ▪ 南京夫子庙 ( 南京) ▪ 周庄古镇游览区 ( 苏州) ▪ 中华恐龙园 ( 常州) ▪ 金坛市 ( ...

  4. 学习windows编程 day4 之 盯裆猫

    写着写着就困了.... 看这些测量数据就算了,是对各种函数的练习 #include <windows.h> LRESULT CALLBACK WndProc(HWND hwnd, UINT ...

  5. SQL语句（四）可视化创建和修改表

    可视化创建修改表 数据库(teaching)->表->新建表 数据库(teaching)->表->(右键)设计->CHECK约束->添加---->标识(名称) ...

  6. 10 SpringBoot全面接管SpringMVC

    Spring Boot官方文档描述 If you want to keep Spring Boot MVC features and you want to add additional MVC co ...

  7. Redis 主从 keepalived高可用 实现 VIP 自动漂移

    Redis 多主写多从度 配置启动OK :直接配 keepalived  相关配置: redis 默认路径 :/usr/local/redis keepalived 默认路径 :/etc/keepal ...

  8. luogu P2662 牛场围栏

    传送门 因为一个木板可以切掉最多\(m\),所以可以先预处理哪些长度的木板可用,开个桶,然后对\([l-m,l]\)打标记,再把打了标记的数取出来 假设可用长度\(a_1,a_2,,,a_n\)从小到 ...

  9. include的作用

    #include发生在预处理阶段,整个编译链接过程,#include是最简单的了,没有之一.就是在include的位置直接把文件原原本本完完整整一字不落的包含进来,下面举一个极端点的例子: //fil ...

  10. char *a与char a[n]的区别

    char *a='ab';//a[2]一定为'\0',但是,a[5]这样的指针越界不会报错 char a[3] = {'a','a','a'};//a[3]属于越界,会报错 char b[5]={'b ...